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