بهترین کتابخانه برای LazyLoad
این کد رو توی فوتر یا هرجا که خودت صلاح میدونی قرار بده، تمومه
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
let active = false;
const lazyLoad = function() {
if (active === false) {
active = true;
setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});
if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});
active = false;
}, 200);
}
};
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});
و در آخر کار هم عکس هات رو اینجوری نمایش بده
<img class=" lazy" src="" data-src="imageUrl'" data-srcset="imageUrl" alt="Image">
@heydariomid4
کلا 5 خط کده دیگه کتابخونه میخای چیکار؟
https://www.cssscript.com/top-10-lazy-loading-javascript-libraries/
این کد رو توی فوتر یا هرجا که خودت صلاح میدونی قرار بده، تمومه
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
let active = false;
const lazyLoad = function() {
if (active === false) {
active = true;
setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});
if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});
active = false;
}, 200);
}
};
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});
و در آخر کار هم عکس هات رو اینجوری نمایش بده
<img class=" lazy" src="" data-src="imageUrl'" data-srcset="imageUrl" alt="Image">
این مطلب رو بخونید، کتابخانه هم معرفی شده:
https://imagekit.io/blog/lazy-loading-images-complete-guide/
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟