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

? کاور رو حال میکنین؟ تنبل بودن بین وبسایت ها بر عکس ما آدمیزادها یه خاصیت مهم و با کلاس محسوب میشهچون باعث میشه زودتر لود بشن و توی گوگل هم اون بالا مالاها بشینن.مقدمهزبانِ سخن در این نوشتار کاملا محاوره ای بوده و قرار نیست ویرایش ادبی روش صورت بگیره پس پیشاپیش اگه زبان فارسی رو همیشه 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 APIhttps://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. }و به همین سادگی می تونید کاری که پکیج های زیادی انجام میدن رو خودتون بدون درد و خون ریزی انجام بدید ?توضیحش که راحته یه مثال عملی نشونمون بده بله از قدیم و ندیم گفتن تا وقتی یه چیزی رو تجربه نکنی درست یادش نمیگیری پس این شما و این هم یک مثال عملی در ری اکتاول پیشنهاد میکنم دمو رو ببینید تا دقیق تر متوجه بشید منظورم چیه و سپس به سراغ سورس کد برید :دمو : https://mvahedii.github.io/lazy-images/سورس کد : https://github.com/Mvahedii/lazy-imagesارتباط با من :LinkedIn | Gmail