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

В веб-приложении мне нужно работать с большим количеством изображений с высоким разрешением, которые динамически добавляются в дерево DOM. Они предварительно загружены, а затем добавлены на страницу.

Одна вещь, чтобы обнаружить, когда такое изображение закончило загрузку, для этого я использую событие load, но как я могу определить, когда в браузере завершено отображаться, используя Javascript? При работе с изображениями с высоким разрешением фактический процесс рисования может занять много времени, и очень важно знать, когда оно закончится.

Ответ 1

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

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

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

function loaded()  {
    requestAnimationFrame(startRender);
}

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

Ответ 2

из mdn,

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

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

Ответ 3

У меня такая же проблема. Я создал страницу preloader с индикатором выполнения. Когда изображение загружено, страница предварительного загрузки белого фона плавно исчезает до opacity: 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;
}

<img id="image"/>

Ответ 4

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

Вы можете установить высоту элемента автоматически (с фиксированной шириной) и с тайм-аутом продолжать проверять размеры элементов в соответствии с естественными размерами изображения. Это не лучшее решение, но если вам действительно нужно что-то сделать после рендеринга, а не после загрузки, это хороший вариант.

Более того, как он мог выглядеть:

//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!'); }));

Ответ 5

Вам нужно событие onload в теге <img>. Например:

function loadImage () {
  alert("Image is loaded");
}
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">

источник

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