شاید تابحال کلمه lazy loading را به کررات شنیده باشید، اما آیا معنی دقیق آنرا می دانید ؟
lazy loading ای که امروز می خواهیم درباره مزایای آن بحث نماییم ، به معنی لود نمودن تصاویر سایت در زمان مناسب و یا به عبارت دیگر لود دیر هنگام تصاویر سایت می باشد!
چیه ؟ بدتر گیجتون کردم ؟ هر چی هم که بلد بودین پرید ؟!!!
خوب اشکال نداره ، الان بهتر توضیح میدم :)

Lazy Loading پروژه ای است که توسط یاهو توسعه داده شده است و همانطور که اشاره شد ، برای افزایش سرعت لود صفحات وب بکار می رود و دلیل این افزایش سرعت در عدم لود تصاویری است که خارج از محدوده دید کاربر هستند و با اسکرول کردن به سمت پایین و در صورتی که تصویر در محدوده دید کاربر قرار گیرد  اقدام به لود تصاویر می کند و از این طریق سرعت لود اولیه صفحه وب را افرایش می دهد.
بطور مثال فرض کنید شما درون یک صفحه 5 عدد تصویر بزرگ قرار داده اید که موجب اسکرول خودرن صفحه در مرورگر کاربر شده است ، بطوری که وقتی کاربر صفحه شما را می بینید ، فقط 2 تصویر اول را می تواند مشاهده نماید و برای دیدن بقیه تصاویر می بایست در صفحه اسکرول نماید.
در چنین حالتی اگر شما از Lazy Loading استفاده نمایید ، در ابتدا فقط 2 تصویر اول برای کاربر لود می شود و وقت کاربر برای لود شدن بقیه تصاویر تلف نمی شود!
حال اگر کاربر صفحه را به سمت پایین اسکرول نماید ، تصاویری که در محدوده دیدش قرار می گیرد تازه شروع به لود شد نمی نمایند.
و این است معجزه lazy loading
در ادامه مطلب طرز استفاده از lazy loading در صفحات وب را آموزش می دهم.

آسانترین راه استفاده از lazy loading ، استفاده از پلاگین جی کوئری (jquery lazyloading) آن است که فایل آن را می توانید از آدرس زیر دانلود نمایید.


جهت استفاده از lazy loading در صفحه وب می بایست بصورت زیر کد بزنید:

1- ابتدا باید تصاویر موجود در صفحه وبتونو بصورت زیر ایجاد کنید:

2- سپس باید فایل کتابخانه جی کوئری و فایل کتابخانه lazy loading را به صفحه وب خود اضافه کنید (درون تگ head بذارید):

مقالات آموزشی دانشجویی برنامه نویسی و الکترونیک و شبکه

3- در پایان باید lazy loading رو روی تصاویر مورد نظرتون فعال کنین:

به همین سادگی :)

البته این پلاگین تنظیمات و امکانات دیگری هم داره که می تونین ازش استفاده کنین.

تنظیمات و امکانات دیگر را می تونین از ایـنـجــــــــــا بخونین.

ویرایش:

به گفته یکی از دوستان، پلاگین معرفی شده در زمان اضافه کردن ایتم‌های جدید از طریق ajax به صفحه با مشکل روبرو می‌شود ! شما می‌توانید با مراجعه به ایـنـجـــــــــا پلاگین‌های بهتری پیدا کنید ! 




موفق باشید.

نوشته شده در تاریخ یکشنبه 15 دی 1392    | توسط: ح.م    | طبقه بندی: آموزش پلاگین های جی کوئری،     | نظرات()