کتابخانه
vanilla-lazyload یه کتابخانه سبک جاوااسکریپت برای بارگذاری تنبل (lazy load) تصویر، ویدیو و iframe هاست. تا وقتی کاربر به یه عنصر پایین صفحه نرسیده، اون رو لود نمی کنه و همین باعث می شه صفحه سریع تر باز بشه. برای کار کردن به jQuery یا کتابخانه دیگه ای نیاز نداره.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۸۰ کیلوبایت· ۳۱ فایل· انتشار
SHA-256: d1afac40ee59ba93ec431e89d141eef94c98e66b8f196f637a0f84110a072a2d
فرض کن یه صفحه داری با چهل تا عکس محصول. کاربر فقط بالای صفحه رو می بینه و شاید هیچ وقت تا آخرش اسکرول نکنه، ولی مرورگر از همون ثانیه اول همه عکس ها رو دانلود می کنه. روی موبایل و اینترنت ضعیف یعنی صفحه دیر باز می شه و کاربر قبل از دیدن چیزی می ره. vanilla-lazyload برای همین مشکل ساخته شده.
ایده ساده است: عکس، ویدیو یا iframe تا وقتی به محدوده دید کاربر نزدیک نشده، لود نمی شه. کتابخانه برای تشخیص این موضوع از IntersectionObserver مرورگر استفاده می کنه و به کتابخانه دیگه ای وابسته نیست. فقط تگ img نیست که پوشش داده می شه. ویدیو، iframe، تصویر پس زمینه CSS و تصویرهای ریسپانسیو با srcset و picture هم کنارش هستن. برای کنترل بیشتر هم گزینه هایی داره، مثل اینکه لود چقدر زودتر از رسیدن کاربر به عنصر شروع بشه، یا اینکه بعد از لود موفق یا خطا یه تابع اجرا بشه.
به درد صفحه های پر از تصویر می خوره: فروشگاه اینترنتی، گالری، وبلاگ های طولانی، صفحه فرود و سایت هایی که چند تا ویدیوی embed شده دارن. اگه قالب خودت رو می نویسی و نمی خوای یه کتابخانه سنگین اضافه کنی، گزینه خوبیه. ولی چند جا بهتره سراغش نری. تصویرهای بالای صفحه، مخصوصاً عکس اصلی هدر، رو lazy نکن. این عکس ها باید زود دیده بشن و lazy کردنشون سرعت حس شده رو بدتر می کنه. سایتی که تصویر کمی داره هم چیز زیادی از این کار نمی گیره. اگه فقط یه lazy load ساده می خوای، ویژگی loading="lazy" خود مرورگر هم شاید کافی باشه.
یه نکته برای وردپرسی ها: خیلی از افزونه های کش و بهینه سازی خودشون lazy load دارن. اگه اون رو روشن گذاشتی و این کتابخانه رو هم اضافه کردی، دو تا مکانیزم با هم تداخل می کنن. یکی رو انتخاب کن. بعد از پیاده سازی هم چک کن عکس ها هم برای کاربر دیده بشن و هم برای ربات جستجو.
نسخه های رسمی و بدون تغییر vanilla-lazyload، با مجوز MIT و ساخته Andrea Verlicchi، توی مخزن داخلی ما هم هست. وقتی دسترسی به منبع های خارجی مشکل داره، می تونی فایل رو از همین جا بگیری و روی هاست خودت بذاری.
راه اندازی vanilla-lazyload پیچیده نیست. قدم های کلی این هاست:
بعد از راه اندازی، صفحه رو باز کن و از تب Network ابزار توسعه دهنده ببین عکس های پایین صفحه موقع اسکرول لود می شن یا نه. یه چیز دیگه: برای عکس های lazy عرض و ارتفاع رو توی HTML مشخص کن تا موقع لود، چیدمان صفحه نپره.
نه. از اسمش هم پیداست، با جاوااسکریپت ساده نوشته شده و به jQuery یا کتابخانه دیگه ای وابسته نیست. می تونی تنهایی توی یه سایت وردپرسی، یه پروژه استاتیک یا یه اپلیکیشن جدید ازش استفاده کنی و لازم نیست چیز دیگه ای کنارش لود کنی.
loading="lazy" ساده است و بدون کتابخانه کار می کنه، ولی کنترل کمی بهت می ده. با vanilla-lazyload می تونی فاصله شروع لود رو تنظیم کنی، برای رویدادهایی مثل لود موفق یا خطا تابع بنویسی و تصویر پس زمینه CSS یا iframe رو هم مدیریت کنی.
اول چک کن به جای src از data-src استفاده کرده باشی و کلاس lazy روی عنصر باشه. بعدش ببین کدی که نمونه LazyLoad رو می سازه، بعد از آماده شدن DOM اجرا می شه یا نه. اگه افزونه کش هم lazy load داره، یکی از این دو تا رو خاموش کن.
معمولاً نه. تصویرهای بالای صفحه، مخصوصاً عکس اصلی هدر یا بنر، باید سریع نمایش داده بشن و lazy کردنشون سرعت حس شده رو بدتر می کنه. lazy load به درد عکس هایی می خوره که کاربر باید اسکرول کنه تا بهشون برسه.
کتابخانه فقط عنصرهایی رو می شناسه که موقع ساخت نمونه توی صفحه بودن. بعد از اینکه محتوای تازه رو به صفحه اضافه کردی، متد update رو روی نمونه LazyLoad صدا بزن تا عنصرهای جدید هم زیر نظر گرفته بشن. این کار رو هر بار بعد از اضافه شدن محتوای تازه، مثلاً بعد از تموم شدن درخواست ایجکس، انجام بده.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.