خواندن ۳ دقیقه·۴ سال پیش

تنبل سازی بدون پکیج

تنبل بودن بین وبسایت ها بر عکس ما آدمیزادها یه خاصیت مهم و با کلاس محسوب میشه

چون باعث میشه زودتر لود بشن و توی گوگل هم اون بالا مالاها بشینن.

مقدمه

زبانِ سخن در این نوشتار کاملا محاوره ای بوده و قرار نیست ویرایش ادبی روش صورت بگیره پس پیشاپیش اگه زبان فارسی رو همیشه 20 می گرفتید ازتون عذرخواهی میکنم.

حتما اصلاح Lazy Load تا بارگزاری تنبل رو مکرر در جاهای مختلف شنیدید.

من قراره توی این مقاله با معرفی یک API و تشریح خلاصه ی اون به همراه یک مثال عملی در کتابخونه ی ری اکت بهتون نشون بدم که همیشه لازم نیست واسه این جنگولک بازیا پکیج به پروژتون اضافه کنید و احتمالا حجم باندلتون رو ببرید بالا

پس تا پایان همراه من باشید ?

اصلا LazyLoad چی چی هس عامو؟

به طور کاملا خلاصه به عکس زیر نگاه کنید :

خب همونطور که احتمالا ملاحظه می کنید ما اینجا 6 تا عکس داریم که تمایل نداریم بلافاصله لود بشن

این تمایل نداشتن بخاطر اینه که این عکس ها باید توسط مرورگر دانلود بشن و بعد به عنوان ریسورس در مرحله ی painting به مرورگر اضافه بشن ( اگه نمیدونید painting چیه توصیه میکنم اول این مقاله ی من رو بخونید و بدونید مرورگر ها چطوری کار میکنند )

گرچه شاید توی تعداد 6 عکس یا حتی 60 عکس هم اونقدر performance سایت شما تحت تاثیر قرار نگیره

اما فرض کنید تعداد بسیار زیادی عکس دارید مثل اینستاگرام وب :

آیا بنظر شما منطقیه که همه ی تصاویر از ابتدا بهشون ریکوئست زده بشه و لود بشن؟ حتی وقتی توی viewport کاربر نیستن؟

مطمئنا جواب شما نه! خواهد بود. اما خب راه حلتون چیه؟

اگه راه حلتون Lazy Load کردن تصاویر با استفاده از attribute ای به نام loading در تگ img به صورت زیر هست باید عرض کنم که خیر ! این توسط همه ی مرورگر ها ساپورت نمیشه فعلا !

<img src=&quotfelan&quot alt=&quotbisan&quot loading=&quotlazy&quot />

راه حل بدون درد و خون ریزی

میخوام بهتون یه API معرفی کنم که با اون می تونید کارهای زیر رو انجام بدید :

بارگزاری تنبل تصاویر وبسایتتون
پیاده سازی infinity scroll
تشخیص مشاهده ی کاربر از یک قسمت خاص از سایتتون ( درست مثل تبلیغات اینترنتی و کاری که یکتانت انجام میده )
پیاده سازی انیمیشن بعضی المنت های صفحه تنها در صورتی که در دید کاربر قرار داده باشند.

خب این اعجوبه ی جادوگر کسی نیست جز Intersection Observer API

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

برای استفاده از این API لازمه که یک instance ازش بسازید و به constructor اون یک callback و یک option پاس بدید

زمانی که شرط های option شما pass بشه callback مورد نظر اجرا میشه و می تونید فرآیند های مدنظرتون رو انجام بدید ( تصویر رو لود کنید ، ریکوئست بزنید و...)

let observer = new IntersectionObserver(callback, options);

حالا محتوای option شما می تونه شامل یک object با مقادیر زیر باشه :

let options = {
  // root: the target element in viewport
  // rootMargin: margin around the root
  // threshold: either a single number or an array of numbers which indicate at what 
      percentage of the target's visibility the observer's callback should be executed.
}

و به همین سادگی می تونید کاری که پکیج های زیادی انجام میدن رو خودتون بدون درد و خون ریزی انجام بدید ?