در این مقاله 12 مورد از برترین پلاگین های Lazy Load را معرفی می کنیم که می تواند به شما در ارائه ی یک تجربه ی کاربری عالی در صفحه ی وب خود کمک کند و می توانید موردی که بیش از همه مناسب وب سایت شماست را انتخاب کنید.

Lazy Loading یک روند است که به وسیله آن می توانیم تجربه ی کاربری در یک وبسایت را با تاخیر انداختن بارگذاری فایل های نسبتا بزرگ، نظیر تصاویر و ویدیوها بدون تاثیر بر روی محتوا بهبود بخشیم. حال سوالی که به ذهن شما خطور می کند این است که " چرا ما به این ویژگی نیاز داریم؟" اجازه دهید درباره ی برخی مزایای پلاگین های Lazy Load صحبت کنیم.

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

نیازی به ذکر کردن نیست اما jQuery یکی از پراستفاده ترین کتابخانه ها برای توسعه ی وب است بنابراین می خواهیم به 12 پلاگین برتر و دردسترس Lazy Load در jQuery نگاهی بیندازیم.

jQuery Lazy

این مورد یکی از بهترین و مورد اعتمادترین پلاگین هایی است که می توانید پیدا کنید. jQuery Lazy از تصاویر در تگ های <img /> در HTML و تصاویر پس زمینه در CSS پشتیبانی می کند. Lazy به راحتی از CDN یا فایل های self-hosted یا از طریق package manager قابل نصب است.

این پلاگین را از GitHub | وبسایت دریافت کنید.

Lazy Load

این پلاگین به تصاویری که خارج از viewport هستند اجازه ی بارگذاری نمی دهد. علاوه براین از Intersection Observer API برای مشاهده ی زمانی که تصویر وارد viewport می شود، استفاده می کند. بنابراین این پلاگین قادر به ارائه ی یک تجربه ی درخشان برای کاربران نهایی است.

این پلاگین را از GitHub | وبسایت دریافت کنید.

BttrLazyLoading

اگر می خواهید سایز تصاویری که بارگذاری می شوند انعطاف بیشتری داشته باشد این مورد یکی از بهترین پلاگین های lazy loading است. علاوه براین این پلاگین به شما اجازه می دهد که ورژن های مختلفی از تصاویر برای اندازه های مختلف صفحه نمایش داشته باشید. اگر می خواهید که صفحه ی وب شما از نظر ذخیره سازی داده بهینه باشد BttrLazyLoading بهترین گزینه است.

این پلاگین را از GitHub دریافت کنید.| دمو

JqueryAsynchImageLoader

اغلب اوقات lazy loader برای اختصار به عنوان JAIL ، یک ویژگی منحصربه فرد دارد. این پلاگین امکان بارگذاری تصاویر پس از رخ دادن یک event خاص یا پس از یک تاخیر مشخص را می دهد. این event ها می تواند هر رویداد UI نظیر کلیک کردن، حرکت موس یا اسکرول کردن باشد.

این پلاگین را از GitHub دریافت کنید.

پلاگین Unveil Lazy Load

 این پلاگین دارای پشتیبانی منحصر به فرد برای دستگاه های دارای نمایشگر retina (شبکیه چشم) دارد. بنابراین به کاربر نهایی این امکان را می دهد که از مشاهده ی صفحه ی وب بخصوص مواردی که برای صفحه نمایش رتینا بهینه سازی شده اند بدون ایجاد اختلال در تجربه ی کاربری لذت ببرد.

 این پلاگین را از GitHub دریافت کنید.

Lazy Load Images

 این مورد یکی از پلاگین های منحصر به فرد است که از ویژگی data-bgimage در تگ های HTML برای بارگذاری پس زمینه ی اجزای UI استفاده می کند در نتیجه سرعت بارگذاری UI بسیار بهبود می یابد. این پلاگین می تواند شما را از مشکلات بزرگ بهینه سازی UI رهایی بخشد.

این پلاگین را از GitHub دریافت کنید.| دمو

jQuery Lazyload Any

این مورد یکی دیگر از پلاگین های ساده و بسیار آسان lazy load است که می تواند هر عنصر UI را با استفاده از تکنیک  lazy loadingبارگذاری کند. اینجا می توانید نگاهی به عملکرد این پلاگین بیندازید.

این پلاگین را از GitHub دریافت کنید.| دمو

jQuery Smartify Image Loads

این مورد یک پلاگین الهام گرفته از Lazyload است که نسبت به نمونه اصل، عناصر UI بیشتری را پوشش می دهد. علاوه بر بارگذاری تصاویر، می تواند AJAX را فراخوانی کند و می تواند کلاس های CSS را بر اساس تقاضا تغییر دهد. این پلاگین روی نسخه های اخیر مرورگر های محبوب نظیر Opera, Google Chrome, Apple Safari و Firefox امتحان شده است.

این پلاگین را از GitHub دریافت کنید.| دمو

Recliner

Recliner یک پلاگین بسیار سبک برای lazy loading iframe ، تصاویر و محتوا های AJAX پویا است. این چنین سبک بودن، این پلاگین را برای سایت های فشرده ی موبایل مناسب می کند علاوه بر این ها Recliner برای موبایل و چاپگر مناسب است و می تواند callback های event برای رفتار های معمول را override کند.

این پلاگین را از GitHub دریافت کنید.| دمو

lazyLoader

این مورد فقط یک پلاگین lazyload دیگر برای وبسایت های responsive شما است و همچنین تعداد request های ارسال شده به سرور را کاهش می دهد درنتیجه تاخیر وبسایت کاهش می یابد.

این پلاگین را از GitHub دریافت کنید و یا دانلود کنید.

jquery.lazyScript

همانطور که از نام پلاگین پیداست این مورد به شما اجازه ی lazy loading در کد جاوااسکریپت را می دهد. این پلاگین به شما امکان ارائه ی یک callback برای هر عنصری که در مرورگر وب ظاهر می شود را می دهد.

این پلاگین را از GitHub دریافت کنید.| دمو

Stalactite

این مورد یک پلاگین شفاف jQuery است. به این پلاگین شفاف می گوییم زیرا محتوای یک عنصر را در مقابل کاربر یکی یکی باز می کند. این پلاگین یک تجربه ی کاربری بسیار منحصر به فردی را ارائه می دهد.

دمو و دانلود

منبع : تم شاپ