Lozad : چگونه تصاویر را بصورت بهینه لود کنیم؟ - قسمت 1



visibility  
mode_comment   ۰

در این مطلب میخوام آموزش Lazy loading یا لود کردن Performant و بهینه تصاویر رو به شما آموزش بدم. با استفاده از ابزار ساده و سبک Lozad.js میتونین به راحتی تصاویر خودتون رو با Performance بالایی لود کنید.

روشهای قدیمی و متداول زیادی برای لود کردن تصاویر وجود داره. هر کدام از این روشها نیازمند روشی برای تشخیص اینکه تصویر مورد نظر در Viewport مرورگر قرار گرفته است یا خیر، هستند. کارهای متداولی که برای بررسی این مورد انجام میشه، بصورت زیر است:

  • Listening یا گوش دادن یا بررسی رویدادهای scroll و resize مربوط به window
  • استفاده از timer مانند setInterval

هر دو روش بالا از لحاظ عملکرد و Performance مشکلاتی رو به همراه دارند.

چرا روشهای قدیمی بهینه نیستند؟

هر دو روشی که در بالا بیان شد مشکلاتی رو به همراه دارند و اونم بخاطر اینه که بصورت پشت سر هم و به تعداد دفعات زیاد انجام میشن و توابع اونا بارها موقعیت یک المنت در قالب رو بررسی میکنن تا متوجه بشن که اون المنت در Viewport قرار داره یا خیر.

البته ابزارهایی سر کار اومدن که با روشها و الگوریتم هایی که پیاده سازی کرده اند، تعداد دفعات اجرا شدن این توابع برای فهمیدن موقعیت المنت رو کاهش دادن و تا حدی موضوع Performance رو بهبود بخشیده اند. با همه اینکارها، بازم در شرایطی که صفحه سنگین باشه و المنتهای زیادی در اون وجود داشته باشه، بعضی وقتا گیرهایی در سایت دیده میشه که کاربران رو اذیت میکنه و نمیتونن راحت از سایت استفاده کنند.

روش دیگه ای وجود داره که با استفاده از اون میتونین تمام این مشکلات رو به سادگی حل کنید و تصاویر خودتون رو با Performance بالا در سایتتون لود کنید. کلید حل این مشکل Intersection Observer API است که اخیرا معرفی شده است.

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

این API قابلیتی رو بهمون میده که بتونیم بصورت Asynchronous تغییرات المنت مورد نظر نسبت به Viewport رو زیر نظر بگیریم و ازشون استفاده کنیم. مثلا میتونیم بفهمیم که المنت مورد نظر ما چه زمانی وارد Viewport میشه، چه زمانی بصورت کامل در Viewport قرار داره و چه زمانی در حال خروج از Viewport می باشد. این API قابلیتهای زیاد دیگه ای رو نیز در اختیارمون قرار میده که میتونین در اینجا اونا رو مطالعه کنید.

مشکلی که با این API وجود داره اینه که اخیرا معرفی شده و فقط بعضی از مرورگرهای مدرن از اون پشتیبانی میکنن.

پشتیبانی مرورگرها از Intersection Observer API

در حال حاضر تقریبا 63% از کاربران جهان که از مرورگرهای مدرن استفاده میکنند، میتونن از مزایای این API بهره مند شوند.

اون مواردی که بنفش هستند از این API پشتیبانی نمیکنند. اگر شما میخواید از این ویژگی استفاده کنید و همچنین قصد دارید مرورگرهای قدیمی رو نیز تحت پوشش قرار بدین، میتونین از این Polyfill استفاده کنید. با اینکار حتی مرورگرهای قدیمی Internet Explorer مانند نسخه 7 و 8 نیز تحت پشتیبانی قرار خواهند گرفت.

ابزاری که در این جلسه اون رو معرفی کردیم و قصد داریم در جلسه بعد اون رو آموزش بدیم، بر پایه همون API ساخته شده و دلیل بهینه بودن اون نیز استفاده از همین API است. این ابزار هیچ پیش نیازی ندارد و حجم بسیار کمی دارد. از این ابزار میتونین در هر جایی که بخواید استفاده کنید.

در جلسه بعد نحوه استفاده از این ابزار رو بصورت کامل و مرحله به مرحله قرار خواهیم داد.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.