🔥یلدا با راکت با (( ۷۰ درصد )) تخفیف! یلدا طولانی است، اما این تخفیف نه.
مشاهده دورههابهترین کتابخانه برای 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/
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟