آموزش Lazy load برای عکس های سایت

آموزش Lazy load برای عکس های سایت

یکی از مهمترین ویژگی ها در طراحی سایت سرعت Load شدن آن سایت هست . برای اینکه سایت شما بازدید خوبی داشته باشه ملاک های بسیار زیادی وجود داره که با انجام دادن میتونید به بازدید بالا دست پیدا کنید که بعضی از آنها از اولویت بالاتری دارند. توی این مقاله میخوام در مورد Lazy Load برای تمامی عکس های سایت شما بدون استفاده از JQuery و با یک روش بسیار ساده و کاربردی توضیح بدم پس با من همراه باشید...

یکی از مزیت های بسیار خوب Lazy Load اینه که اگر سایت شما مثلا 20 عکس داشته باشه ، این قابلیت باعث میشه که با ورود به سایت فقط عکس هایی نمایش داده بشن که در مقابل دید شما (به اندازه تصویر مانیتور شما) قرار دارند و از لود شدن عکس هایی که در بخش های پایین تر قرار دارن جلوگیری میکنه تا زمانی که به اون بخش اسکرول نکردید !! و هر بار که به قسمت هایی پایینتر اسکرول میکنید عکس ها به صورت خودکار لود میشن و به کاربر نمایش داده میشن . 

اینکار برای بالابردن سرعت سایت شما، حافظه کش و ... کاربرد بسیار بالایی داره . نمونه ای از Lazy load  رو میتونید از سایت توسعه پردازان مشاهده کنید.

مرحله اول : 

تمامی تگ های Img که در سایت شما استفاده شده را پیدا کنید و کلاس Lazy رو بهش اضافه کنید.

<img src="/image/sample.jpg" class="lazy" />

 

مرحله دوم :

بعد از افزودن کلاس lazy باید کلمه src که درون تگ Img استفاده شده رو به data-src تغییر بدید.

<img data-src="/image/sample.jpg" class="lazy" />

مرحله سوم : 

در پایین صفحه قبل از بسته شدن تگ body باید تگ Script باز کنید و کدهای مربوط به Lazy Load رو قرار بدید . 

 

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var lazyloadImages;

        if ("IntersectionObserver" in window) {
            lazyloadImages = document.querySelectorAll(".lazy");
            var imageObserver = new IntersectionObserver(function(entries, observer) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        var image = entry.target;
                        image.src = image.dataset.src;
                        image.classList.remove("lazy");
                        imageObserver.unobserve(image);
                    }
                });
            });

            lazyloadImages.forEach(function(image) {
                imageObserver.observe(image);
            });
        } else {
            var lazyloadThrottleTimeout;
            lazyloadImages = document.querySelectorAll(".lazy");

            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);
        }
    })

</script>

در واقع این کد تمام Element هایی که کلاس Lazy براشون نوشته شده رو پیدا میکنه و قابلیت Lazy Load رو پیاده میکنه.

امیدوارم که این مقاله براتون مفید باشه .

مقالات پیشنهادی : 

طراحی سایت ، سئو و بهینه سازی ، هاست و دامنه

اگر می خواهید اطلاعات بیشتری کسب کنید با ما در تماس باشید

در توسعه پردازان(FixDevelop) ما به تعدادی از مشتریان خود در زمینه های طراحی سایت و اپلیکیشن موبایل، طراحی لوگو، خدمات سئو و بهینه سازی کمک کرده ایم تا با گسترش کسب و کار خود بتوانند جایگاه بهتری در دنیای اینترنت داشته باشند.

نظر خود را برای این مقاله ثبت کنید