Skip to content

Instantly share code, notes, and snippets.

@A-Programmer
Last active May 1, 2018 14:31
Show Gist options
  • Save A-Programmer/610376a318d46324df0be1a4e706f9cf to your computer and use it in GitHub Desktop.
Save A-Programmer/610376a318d46324df0be1a4e706f9cf to your computer and use it in GitHub Desktop.
What is Lazy Loading and introduce some JQuery Lazy Loading Plugins

Lazy Loading چیست؟

Lazy Loading یا بارگذاری احمقانه یك تكنیك برای به تاخیر انداختن بارگذاری تصاویر و ویدئو در صفحات وب به جای بارگذاری كل صفحه می باشد. این تكنیك باعث كم شدن زمان انتظار كاربر برای بارگذاری می شود.

در ادامه به چند افزونه جی كوئری برای Lazy Loading اشاره خواهیم كرد.

1.LazyYT.js

این افزونه برای بارگذاری ویدئو های یوتیوب بسیار مفید است. در زمان بارگذاری اولیه سایت درون باكسی كه قرار است ویدئو یوتیوب نمایش داده شود یك تصویر پیش نمایش از ویدئو جایگزین می شود و با اشاره كردن موس روی باكس آی فریم مربوط به نمایش ویدئو یوتیوب جایگزین باكس می شود.

2.JQuery Lazyload Any

این افزونه برای تمام المنت های صفحه كاربرد دارد نه تنها تصاویر بلكه ویدئو، متون و تمام المنت های موجود در صفحه را می توانید به كمك این افزونه با تكنیك Lazy Load نمایش دهید.

  1. Echo.js

این افزونه یكی از ساده ترین افزونه ها در این زمینه می باشد كه حجم نهایی آن كمتر از یك كیلوبایت می باشد!

  1. BttrLazyLoading

این فزونه به شما كمك می كند تا تصاویر را تنها در ویوپورت ها نمایش دهید، همچنین اجازه می دهد تا اندازه های مختلف برای یك تصویر را در 4 اندازه صفحه نمایش بارگذاری كنید.اگر از این افزونه استفاده كنید، تصاویر شما تا زمانی كه اسكرول كاربر به آنها نرسیده بارگذاری نمی شوند كه این باعث افزایش سرعت صفحه شما می شود.

  1. Lazy Load XT

این افزونه بسیار سریع، قابل گسترش و همینطور موبایل گرا می باشد و به منظور بارگذاری تصاویر و ویدئو به صورت Lazy Loading استفاده می شود. این افزونه به صورت توكار از فریم ورك JQueryMobile نیز پشتیبانی می كند.

در این مقاله به 5 افزونه اشاره شد كه برای تكنیك Lazy Loading می توانید از آنها استفاده كنید، در مقالات آینده افزونه های دیگری نیز معرفی خواهند شد.

ما در شبکه های اجتماعی: Telegram, Instagram, Twitter, Linkedin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment