Как определить, когда изображение уже готового перевода в браузере (т. е. окрашенные)?

Я использовал метод requestAnimationFrame, чтобы сделать трюк. После того, как изображение загружено, оно будет вынесено на следующем кадре анимации. Поэтому если вы ждете два кадра анимации, ваш образ будет оказана.

function rendered() {
    //Render complete
    alert("image rendered");
}

function startRender() {
    //Rendering start
    requestAnimationFrame(rendered);
}

function loaded()  {
    requestAnimationFrame(startRender);
}

См http://jsfiddle.net/4fg3K/1/

от уведомление,

в MozAfterPaint событие срабатывает, когда содержимое перекрашивали экран и предоставляет информацию о том, что был перекрашен. Это В основном, используется для изучения оптимизации производительности

Надеюсь, что вы делаете это, чтобы измерить производительность изображения.

У меня была та же проблема. Я создал страницу загрузчик с прогресс-бар. Когда изображение загрузится, страница белом фоне прелоадер исчезает ровно до непрозрачности: 0, но изображение все равно не отображается.

Я, наконец, используется метод setInterval, когда изображение загружается (но не отображается). В промежутке я проверила naturalWidth и naturalHeight свойства (поддержка: в IE9+). Изначально он равен "0", а когда изображение оказывается это показывает его текущую ширину и высоту.

в

const image = document.getElementById('image');

image.src = "https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-1.jpg";

image.onload = function () {
  console.log('Loaded: ', Date.now());
  const interval = setInterval(() => {
    if (image.naturalWidth > 0 && image.naturalHeight > 0) {
      clearInterval(interval);
      rendered();
    }
  }, 20);
}

function rendered() {
  console.log('Rendered: ', Date.now());
}

img{
  width: 400px;
}

в

Обновление: не используйте этот подход - не't работа в тех случаях, когда размер изображения установлен на что-то другое, чем по умолчанию

Вы можете установить <ИМГ> элемент'с высоты автоматическая (с фиксированной шириной) и с тайм-аутом держать на проверку элемента'С размеры совпадают с естественными размеры изображения. Это's не лучшее решение, но если вам действительно нужно что-то делать после перевода, а не после загрузки, это'ы хороший вариант.

Более или менее, что's, как это может выглядеть:

//this is NOT a real code
function checkIfRendered(img, onRender) {
    var elRatio = img.width() / img.height();
    var natRatio = img.naturalWidth / img.naturalHeight;

    if (elRatio === natRatio)
        onRender();
    else {
        setTimeout(function() {
            checkIfRendered(imgEl, onRender)
        }, 20);
    }
}

img.onload(checkIfRendered(img, function() { alert('rendered!'); }));

Вам нужен события onload событие `<ИМГ и GT; тег. Например:

function loadImage () {
  alert("Image is loaded");
}

Источник

Если изображение на фоне другого элемента, загрузить изображение в фоновом режиме (самый простой Аяксе сделать запрос) и когда результат возвращается, установить фон после загрузки.