javascript — ленивая загрузка динамически отображаемых изображений?
Я отображаю изображения из моей базы данных, используя while цикл, и я пытался найти способ ленивой загрузки этих динамически отображаемых изображений.
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll("img.lazy");
var lazyloadThrottleTimeout;
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});
Я всегда сталкиваюсь с одной и той же проблемой: изображения не будут загружаться, пока я не начну прокручивать. Это означает, что первые изображения должны отображаться нормально (т. Е. Без отложенной загрузки), но я не мог понять, как этого добиться, так как все они отображаются в одном цикле.
Я что-то искал, но все уроки / скрипты отображают контент, когда посетитель начинает прокручивать.
Есть ли учебник (или сценарий) о том, как это сделать?
Решение
Вы можете поместить что-то вроде флага, чтобы некоторые изображения были изначально загружены в атрибут data- *. Следовательно, поместите атрибут к вашему изображению, как это,
<img data-initial="true" >
Затем добавьте этот код в функцию ready, чтобы сделать их изначально загруженными
lazyloadImages.forEach(function(img){
if($(img).data('initial')){
img.src = img.dataset.src;
img.classList.remove('lazy');
}
}
Другие решения
Других решений пока нет …