کتابخانه
lozad یه کتابخانه سبک جاوااسکریپته که لود تنبل (lazy load) رو برای هر المان HTML انجام می ده؛ از تصویر و ویدیو تا iframe و بنر تبلیغاتی. تا وقتی المان به محدوده دید کاربر نرسیده، منبعش دانلود نمی شه. نتیجه اش صفحه ای سبک تر و بازشدن سریع تر، مخصوصاً روی موبایل و اینترنت ضعیفه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۱۷ کیلوبایت· ۵ فایل· انتشار
SHA-256: 98e15110586a9877906d7a4ada5a789c0deaa285600027e1f3c7e925fb4b05b7
وقتی یه صفحه پر از عکس و ویدیو باشه، مرورگر همه رو یکجا دانلود می کنه، حتی چیزهایی که شاید کاربر هیچ وقت تا اونجا اسکرول نکنه. روی اینترنت موبایل ایران که گاهی کند و ناپایداره، این یعنی کاربر چند ثانیه به یه صفحه نیمه خالی نگاه می کنه. lozad برای همین ساخته شده: منبع هر المان رو فقط وقتی لود می کنه که کاربر نزدیک دیدنش باشه.
کار باهاش راحته. به جای src، آدرس رو توی data-src می ذاری و کلاس lozad رو به المان می دی. کتابخانه با IntersectionObserver خود مرورگر المان ها رو زیر نظر می گیره و وقتی نزدیک محدوده دید اومدن، مقدار رو سر جای درستش می ذاره. به کتابخانه دیگه ای وابسته نیست و حجمش کمه. فقط به تصویر معمولی هم محدود نیست. تصویر پس زمینه، تگ picture و srcset، ویدیو و iframe رو هم پشتیبانی می کنه. می تونی برای لحظه لود شدن هر المان یه تابع هم تعریف کنی، مثلاً برای اضافه کردن یه کلاس انیمیشن.
برای کی مناسبه؟ فروشگاه ووکامرسی با گالری محصول زیاد، وبلاگی با عکس های متعدد، صفحه فرودی که چند تا ویدیو یا نقشه embed شده داره، یا قالبی که خودت می نویسی و می خوای بدون افزونه سنگین لود تنبل داشته باشی. تو این موارد lozad انتخاب خوبیه.
کجا لازمش نداری؟ اگه فقط چند تا تصویر ساده داری و کاربرهات مرورگر به روز دارن، ویژگی بومی loading=lazy روی تگ img معمولاً کافیه. یه نکته مهم هم هست: تصویر اصلی بالای صفحه، همونی که کاربر اول از همه می بینه، رو لود تنبل نکن. این کار نمایش محتوای اصلی رو عقب میندازه و نتیجه برعکس می ده. چون تصویرها با جاوااسکریپت جایگزین می شن، برای کاربرهایی که JS خاموش دارن یه noscript هم بذار. مرورگرهای خیلی قدیمی IntersectionObserver ندارن و برای اون ها باید polyfill اضافه کنی.
lozad با مجوز MIT و توسط Apoorv Saxena منتشر شده. نسخه های رسمی و بدون تغییرش توی مخزن داخلی ما هم هست، پس وقتی npm یا CDN های خارجی کند یا قطعه، می تونی از همین جا برداری.
اول فایل کتابخانه رو به صفحه اضافه کن؛ کد آماده اش پایین همین صفحه هست. بعدش مراحل کلی اینه:
توی وردپرس هم همین مسیر رو می ری: اسکریپت رو توی قالب یا قالب فرزند صف کن و خروجی HTML تصویرها رو با فیلتر یا قالب خودت عوض کن. آخرش یه تست روی موبایل بگیر و ببین تصویرها موقع اسکرول لود می شن یا نه.
lozad یه کتابخانه سبک جاوااسکریپته برای لود تنبل المان های HTML مثل تصویر، ویدیو، iframe و بنر. منبع المان تا وقتی به محدوده دید کاربر نزدیک نشده دانلود نمی شه. نتیجه اش کم شدن حجم اولیه صفحه و بازشدن سریع تر اونه، به خصوص روی اینترنت کند.
loading=lazy ساده تره و بدون جاوااسکریپت کار می کنه، ولی کنترل کمتری بهت می ده. lozad برای تصویر پس زمینه، ویدیو، iframe و المان های دلخواه هم جواب می ده و می تونی تابع لحظه لود و فاصله شروع لود رو تنظیم کنی. برای چند تصویر ساده، همون ویژگی بومی معمولاً کافیه.
معمولاً یکی از این سه تاست: کلاس lozad روی المان نیست، آدرس رو توی data-src نذاشتی، یا بعد از ساخت نمونه، متد observe رو صدا نزدی. اگه محتوا بعداً با ایجکس میاد، باید دوباره observe رو صدا بزنی. کنسول مرورگر رو هم برای خطای اسکریپت چک کن.
نه. تصویر اصلی و هر چیزی که کاربر بلافاصله می بینه باید مستقیم و بدون لود تنبل بیاد. لود تنبل برای تصویرهای پایین تر صفحه ست. اگه بالای صفحه رو هم تنبل کنی، محتوای مهم دیرتر نشون داده می شه و تجربه کاربر بدتر می شه.
lozad به IntersectionObserver مرورگر تکیه داره. مرورگرهای جدید اون رو دارن، ولی نسخه های خیلی قدیمی ندارن و برای اون ها باید polyfill اضافه کنی. اگه مخاطب های سایتت از مرورگر قدیمی استفاده می کنن، قبل از انتشار حتماً تست بگیر.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.