В веб-приложении мне нужно работать с большим количеством изображений с высоким разрешением, которые динамически добавляются в дерево DOM. Они предварительно загружены, а затем добавлены на страницу.
Одна вещь, чтобы обнаружить, когда такое изображение закончило загрузку, для этого я использую событие load, но как я могу определить, когда в браузере завершено отображаться, используя Javascript?
При работе с изображениями с высоким разрешением фактический процесс рисования может занять много времени, и очень важно знать, когда оно закончится.
Я использовал requestAnimationFrame, чтобы сделать трюк. После загрузки изображения он будет отображаться во время следующего кадра анимации. Поэтому, если вы подождете два кадра анимации, ваше изображение будет отображаться.
function rendered() {
//Render complete
alert("image rendered");
}
function startRender() {
//Rendering start
requestAnimationFrame(rendered);
}
function loaded() {
requestAnimationFrame(startRender);
}
из mdn,
Событие MozAfterPaint запускается, когда контент перекрашивается на экран и предоставляет информацию о том, что было перекрашено. это в основном используется для исследования оптимизации производительности
Надеюсь, вы делаете это, чтобы оценить производительность отображаемого изображения.
У меня такая же проблема. Я создал страницу 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"/>Обновление: не используйте этот подход - не работает в тех случаях, когда размеры изображения установлены на что-то еще, чем по умолчанию
Вы можете установить высоту элемента автоматически (с фиксированной шириной) и с тайм-аутом продолжать проверять размеры элементов в соответствии с естественными размерами изображения. Это не лучшее решение, но если вам действительно нужно что-то сделать после рендеринга, а не после загрузки, это хороший вариант.
Более того, как он мог выглядеть:
//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 в теге <img>. Например:
function loadImage () {
alert("Image is loaded");
}
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
Если изображение является фоном другого элемента, загрузите изображение в фоновом режиме (с помощью простого запроса AJAX GET), и когда результат вернется, установите фон после его загрузки.