0
Через некоторое Googling и немного умственным я придумал этот небольшой скрипт для ленивых нагрузки мои изображения:Изображения Ленивый нагрузки
function elementInViewport(el) {
var rect = el.getBoundingClientRect();
return (rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight));
}
function lazyLoad() {
var els, backgroundImage;
els = document.getElementsByClassName('lazyLoad');
for (var i = 0; i < els.length; i++) {
backgroundImage = els[i].dataset.bgimg;
if (elementInViewport(els[i])) {
els[i].style.backgroundImage = 'url('+backgroundImage+')';
};
};
};
lazyLoad();
window.addEventListener('scroll',lazyLoad);
И в HTML:
<div class="lazyLoad" data-bgimg="<?php echo $image_url; ?>"></div>
Я интересно, если это на самом деле работает, потому что кажется, что это так: стиль фонового изображения правильно применяется только тогда, когда элемент появляется в поле зрения, я проверял его через dev, но он делает это так быстро, что на самом деле кажется, что изображение уже загружено где-то, возможно, в память из-за данных-bgimg? Я также ctrl + shift + r перезагрузил страницу, чтобы не использовать кеш, но тот же результат: слишком быстро, чтобы быть реальным.
помните, что onscroll может запускать сотни раз в секунду, и вы восстанавливаете даже загруженные изображения ... – dandavis
Вы тестируете на localhost? Если вы это сделаете, загрузка будет очень быстрой. Прежде всего отключите кеш, когда инструменты dev открыты (для этого есть опция). Во-вторых, попробуйте использовать дросселирование сети, чтобы замедлить скорость загрузки. – Cristy
спасибо @dandavis, не думал об этом. Я позже добавлю условие, которое проверяет, имеет ли элемент уже примененный bg img. И если я понял, что вы имеете в виду о событии onscroll, я всегда немного испугался его использования по той же причине, что и вы, но клиент попросил ленивую загрузку, и я хочу свести к минимуму использование плагинов и библиотек. – Nicola