1. خانه
2. مقاله
3. 5 تکنیک lazy load برای بهینه سازی سایت

5 تکنیک lazy load برای بهینه سازی سایت

اگر تصاویر باعث کند شدن بارگذاری صفحات شود تاثیر منفی در تعداد بازدیدکنندکان خواهد گذاشت و ممکن است بازدیدکنندگان از مشاهده وب سایت شما خسته شوند و از ادامه مطالعه صفحات شما منصرف شوند پس مدیریت بارگذاری تصاویر امری مهم است

lazy loading چیست؟

lazy loading به این معنی است که بارگذاری تصاویر بعد از نمایش دیگر اجزا مثل متون بارگذاری و نمایش داده شود و یا حتی تا اسکرول به آنها نرسیده است بارگذاری نشوند. 5 روش را برای lazy loading به شما نشان میدهیم.

#1 David Walsh’s Simple Image Lazy Load and Fade

David Walsh نسخه ساده ای را برای lazy loading پیشنهاد کرده است که ما نمونه ساده آنرا می بینیم. شما ویژگی src را با data-src عوض می کنید.

    <img data-src="image.jpg" alt="test image">

و در CSS استایلهای زیر را وارد می کنید:

img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}

حالا در فایل جاوااسکریپتی خود کدهای زیر را قرار می دهیم:

[].forEach.call(document.querySelectorAll('img[data-src]'),    function(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = function() {
    img.removeAttribute('data-src');
  };
});

اطلاعات بیشتر را در blog آقای David Walsh می توانید مشاهده کنید.

#2 Robin Osborne’s Progressively Enhanced Lazy Loading

رابین آزبورن یک راه حل هوشمندانه برای lazy load پیشنهاد داده است. به کدهای زیر توجه کنید:

    <img
    src="1x1.gif"
    class="lazy"
    data-src="real-image.jpg"
    alt="Laziness"
    width="300px" />

و در جاوااسکریپت کدهای زیر را وارد می کنیم:

var lazy = document.getElementsByClassName('lazy');

for(var i=0; i < lazy.length; i++){
 lazy[i].src = lazy[i].getAttribute('data-src');
}

اطلاعات بیشتر را در blog رابین آزبورن مشاهده کنید.

#3 Lazy Load XT jQuery Plugin

یک پلاگین jQuery که عکسهای سنگین را هندل می کند. Lazy Load XT یک پلاگین jQuery می باشد. به کدهای زیر توجه کنید:

    <script src="jquery.js"></script>
    <script src="jquery.lazyloadxt.js"></script>

کتابخانه های بالا به سورس برنامه اضافه می کنیم، سپس بجای src از data-src استفاده می کنیم:

    <img data-src="lazy.jpg" width="100" height="100" alt="test image">

و در آخر متد زیر را صدا می زنیم:

    $(elements).lazyLoadXT();

برای مشاهده پلاگین بالا اینجا راکلیک کنید.

#4 bLazy.js — Vanilla JavaScript Plugin

bLazy یک کتابخانه هوشمند جاوا اسکریپتی، برای نمایش عکسها بصورت lazy load می باشد. bLazy بسیار سبک وزن می باشد نسخه minified آن کمتر 1.2kb می باشد و gzip شده است و در پهنای باند سرور بسیار صرفه جویی میکند. از اینجا می توانید کتابخانه بالا را دانلود کنید.

#5 Lazy Loading with Blurred Image Effect

روش دیگر این است که اول عکس را بصورت blur نمایش دهیم وسپس عکس اصلی بتدریج نمایان شود. برای اینکار ار کتابخانه progressive-image.js که یک کتابخانه جاوا اسکریپتی است استفاده می کنیم.