امید حیدری
4 سال پیش توسط امید حیدری مطرح شد
3 پاسخ

بهترین کتابخانه برای LazyLoad

بهترین کتابخانه برای LazyLoad


ثبت پرسش جدید
نیما - ش
تخصص : برنامه نویس وب
@nimageneral 4 سال پیش مطرح شد
0

این کد رو توی فوتر یا هرجا که خودت صلاح میدونی قرار بده، تمومه

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">

imaniy
تخصص : طراح وب
@imaniy 4 سال پیش مطرح شد
0

@heydariomid4
کلا 5 خط کده دیگه کتابخونه میخای چیکار؟

https://www.cssscript.com/top-10-lazy-loading-javascript-libraries/

نیما - ش
تخصص : برنامه نویس وب
@nimageneral 4 سال پیش مطرح شد
0

این کد رو توی فوتر یا هرجا که خودت صلاح میدونی قرار بده، تمومه

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">

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
0

این مطلب رو بخونید، کتابخانه هم معرفی شده:
https://imagekit.io/blog/lazy-loading-images-complete-guide/


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام