لود تنبل (Lazy Loading) چیست؟ قسمت دوم: روش های پیاده سازی

انواع مختلف تکنیک های پیاده سازی Lazy Loading

با سلام و احترام خدمت شما خوانندگان فرهیخته؛ با قسمت دوم از مبحث Lazy Loading در خدمت شما هستم. می توانید قسمت اول را در این لینک بخوانید. در این قسمت از مقاله شما را با 5 روش مختلف از لود تنبل آشنا می کنیم. این 5 روش پرطرفدار ترین روش های حال حاضر برای پیاده سازی لود تنبل می باشند.

روش اول: روش ساده ی دیوید والش (David Walsh)

آقای والش اسکریپت اختصاصی خودشان را برای لود تنبل (Lazy Loading) پیشنهاد داده اند. این روش به این شکل است که ویژگی src مربوط به یک عکس در متن HTML با ویژگی data-src جایگزین می شود:

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

در فایل های CSS عنصر مورد نظر با ویژگی data-src مخفی است و زمانی که بارگذاری شد توسط افکت انتقال نرم CSS نمایان می شود.

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

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

حالا جاوا اسکریپت ویژگی src را به هر کدام از عناصر دارای تگ img اضافه می کند و مقدار آن را برابر با مقدار data-src قرار می دهد. سپس زمانی که تصویر بارگذاری شد، جاوا اسکریپت ویژگی data-src را از تمامی تصاویر حذف می کند.

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

آقای والش روش دیگری را برای زمانی که جاوا اسکریپت از کار می افتد نیز پیشنهاد داده اند؛ می توانید در مورد این روش بیشتر در وبلاگ دیوید والش بخوانید.

نکته ی مثبت این روش: اجرای آن بسیار ساده است.

نکته ی منفی این روش: از قابلیت بارگذاری در هنگام اسکرول پشتیبانی نمی کند؛ به عبارت دیگر مرورگر تمامی تصاویر را، فارغ از اینکه کاربر به قسمت خاصی از صفحه اسکرول کرده باشد یا خیر، بارگذاری می کند.

فرق این روش با حالت عادی چیست؟
 فرق این روش با حالت عادی چیست؟

تفاوت آنجا است که وب سایت تا بارگذاری تمام تصاویر منتظر نمی ماند و چشم انداز اولیه سریع تر به کاربر نمایش داده می شود (چشم انداز اولیه چیست؟) اما دیگر شاهد کاهش پنهای باند مصرفی نخواهیم بود چرا که تمامی تصاویر، مستقل از اسکرول کردن کاربر، بارگذاری خواهند شد.

روش دوم: روش رابین آزبورن (Robin Osborne)

پایه ی روش خانم آزبورن بر اساس پیشرفت تدریجی است.

دلیل نام گذاری این روش به چه صورت بوده است؟ چرا "پیشرفت"؟

به این دلیل که در این روش استفاده از جاوا اسکریپت برای بارگذاری تصاویر به جای حالت عادی (HTML و CSS)، یک پیشرفت محسوب می شود.

چرا "تدریجی" و مرحله ای؟

به این دلیل که اگر از روشی برای بارگذاری تصاویر استفاده کنیم که وابسته به جاوا اسکریپت باشد، با از کار افتادن جاوا اسکریپت یا نقص اسکریپت به هر دلیل ممکن است هیچ تصویری در سایت شما بارگذاری نشود!

اما این روش طوری عمل میکند تا در صورت از کار افتادن جاوا اسکریپت، باز هم تصاویر به مخاطب نمایش داده شود. ساختار ساده از پیاده سازی این روش را می توانید در این لینک ببینید و برای نگاه به ساختار پیچیده تر این روش به این لینک سر بزنید.

اسکریپت خالصِ این روش در حالت ساده به این شرح است (پروژه ی کامل در لینک بالا):

<script>
registerListener('load', setLazy);
registerListener('load', lazyLoad);
registerListener('scroll', lazyLoad);

var lazy = [];

function setLazy(){
    lazy = document.getElementsByClassName('lazy');
    console.log('Found ' + lazy.length + ' lazy images');
} 

function lazyLoad(){
    for(var i=0; i<lazy.length; i++){
        if(isInViewport(lazy[i])){
            if (lazy[i].getAttribute('data-src')){
                lazy[i].src = lazy[i].getAttribute('data-src');
                lazy[i].removeAttribute('data-src');
            }
        }
    }
    
    cleanLazy();
}

function cleanLazy(){
    lazy = Array.prototype.filter.call(lazy, function(l){ return l.getAttribute('data-src');});
}

function isInViewport(el){
    var rect = el.getBoundingClientRect();
    
    return (
        rect.bottom >= 0 && 
        rect.right >= 0 && 
        rect.top <= (window.innerHeight || document.documentElement.clientHeight) && 
        rect.left <= (window.innerWidth || document.documentElement.clientWidth)
     );
}

function registerListener(event, func) {
    if (window.addEventListener) {
        window.addEventListener(event, func)
    } else {
        window.attachEvent('on' + event, func)
    }
}
</script>

نکات مثبت این روش:

•  کاربران در همه حال به محتوای کامل سایت شما دسترسی خواهند داشت.
• نه تنها ملاحظاتی برای مواقعی دارد که جاوا اسکریپت غیر فعال است (مثلا در مرورگر)، بلکه فکر مواقعی که جاوا اسکریپت از کار می افتد و یا اسکریپت ما به خطایی بر میخورد را نیز کرده است.
• تصاویر را بر اساس اسکرول کردن کاربر بارگذاری می کند بنابراین اگر کاربر به قسمت پایین صفحه اسکرول نکند تصاویر آن قسمت بیهوده بارگذاری نمی شود.
• به هیچ منبع خارجی نیاز و وابستگی ندارد؛ بنابراین نه صحبتی از پلاگین ها به میان آمده و نه فریم ورک ها.

روش سوم: استفاده از پلاگین lazyloadxt (در جی کوئری)

برای استفاده ی سریع و بدون دردسر از این تکنیک می توانید این پلاگین را بعد از لود کردن جی کوئری در سورس کد خود، لود کنید.

این پلاگین دو نسخه دارد؛ نسخه ی اول یا jquery.lazyloadxt.js که مخصوص اجرای تکنیک لود تنبل یا Lazy Loading برای تصاویر است و نسخه ی دوم یا jquery.lazyloadxt.extra.js که مخصوص لود تنبل برای فیلم ها، iframe ها و تمام عناصری است که ویژگی src دارند. نمونه ی بارگذاری در سورس کد:

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

اگر پلاگین را به حال خود رها کنید به صورت اتوماتیک شروع به کار می کند اما اگر نیاز دارید در قسمتی از کد خود آن را به صورت دستی اجرا کنید می توانید مانند کد زیر عمل کنید:

$(elements).lazyLoadXT();

اگر از جی کوئری استفاده نمی کنید باید بدانید این پلاگین یک نسخه ی سبک تر با نام jqlight.lazyloadxt.min.js نیز ارائه می کند که نیازی به جی کوئری ندارد. نمونه ی بارگذاری:

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

پس از لود این پلاگین، باید تمامی تصاویر در سورس کد خود را با ویژگی data-src (به جای src) وارد کنید.

این پلاگین ویژگی های بسیار زیادی را ارائه می دهد که توضیح تمامی آن ها در یک مقاله ممکن نیست؛ به طور مثال:

• قابلیت پشتیبانی از Bootstrap و jQueryMobile و انواع افزونه های دیگر که روی پلاگین اصلی سوار می شوند.
• نمایش علامت loading (دایره مانند) تا بارگذاری کامل تصویر با لود کردن jquery.lazyloadxt.spinner.css در صفحه ی خود.
• اضافه کردن انواع و اقسام افکت های انتقال و غیره با لود کتابخانه ی Animate.css در صفحه ی خود. مثال استفاده در اسکریپت:

$.lazyLoadXT.onload.addClass = 'animated bounceOutLeft';

• استفاده از CDN به جای بارگذاری روی سرور خودتان.
• پشتیبانی از مرورگر هایی مثل IE6 تا IE11 و Opera mini
• افکت های انتقال و انیمیشن های بسیار دیگر با استفاده از افزونه ها
• و امکانات بسیار دیگر ...

قانون کلی در مورد کار با پلاگین ها، فریم وورک ها و هر نوع منابع اینترنتی

اکثر آنها قسمتی به نام documentation یا usage یا installation و ... دارند. قبل از استفاده حتما آن ها را بخوانید تا با روش کار و استفاده از آن ها آشنا شوید. اکثر این منابع به صورت متن باز نوشته شده اند و متعلق به کمپانی خاصی نیستند؛ بنابراین ممکن است از استاندارد های رایج وب پیروی نکنند و شما را سر در گم کنند.

روش چهارم: استفاده از پلاگین bLazy.js

پلاگین bLazy.js یک پلاگین لود تنبل سبک (حجم حدود 1.2 کیلوبایت پس از Gzip و minify شدن) و مستقل برای جاوا اسکریپت است. به نقل از وبسایت رسمی bLazy :

bLazy is a lightweight lazy loading image script (less than 1.2KB minified and gzipped). It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn’t browse the whole page.

 نکات زیر از ویژگی های مثبت آن به شمار می روند:

• اجرای تکنیک لود تنبل روی تصاویرِ متن و تصاویر پس زمینه
• بارگذاری تصاویر متفاوت بر اساس سایز صفحه ی دستگاه کاربر
• اجرای تکنیک لود تنبل بر روی هر عنصری با ویژگی src
• پشتیبانی از مرورگر های قدیمی مثل IE7 و IE8
• استفاده از CDN

مثال ساده از بارگذاری:

<img class="b-lazy" src="placeholder.gif" data-src="image.jpg" alt="test image">

حالا باید تگ img را به شکل زیر تغییر دهید:

- کلاس .b-lazy را اضافه کنید.

- از یک عکس دلخواه به عنوان placeholder برای ویژگی src استفاده کنید.

سپس می توانید در جاوااسکریپت blazy را صدا بزنید و تغییرات خود را اعمال کنید:

var bLazy = new Blazy({
  //options here
});

برای اطلاعات بیشتر:

وب سایت blazy

مثال هایی از blazy

صفحه ی blazy در گیت هاب

روش پنجم: اثر بلوری در لود تنبل (Lazy Loading)

اگر به مثالی که در قسمت قبل از وب سایت Medium ذکر کردیم توجه کرده باشید متوجه این مورد خواهید شد. تصاویر در وب سایت Medium قبل از بارگذاریِ کامل، به صورت تار و بلوری دیده می شوند؛ مثال تصویری:

روش های مختلفی برای پیاده سازی این تکنیک وجود دارد اما از نظر من روش بهتر، روش Craig Buckler است. مزیت های این روش:

• تنها 463 بایت CSS و 1007 بایت جاوا اسکریپت (در حالت minify شده)
• پشتیبانی از صفحات retina (رزولوشن بسیار بالا)
• بدون پیش نیاز و وابستگی به پلاگین خاص
• بر اساس تکنیک پیشرفت تدریجی

می توانید سورس کد این پروژه را در صفحه ی گیت هاب (GitHub) آن دانلود کنید.

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