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



visibility  
mode_comment   ۰

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

چرا Performance ابزار Lozad خوب و بهینه است؟

عامل اصلی بهینه بودن این ابزار نسبت به روشهای قدیمی، Intersection Observer API می باشد. این API به شما اجازه میده که زمانی که یک المنت به المنت دیگر (میتونه Viewport هم باشد) وارد یا خارج شد، یک Callback فراخوانی بشه و کدهای درون اون اجرا بشوند.

ابزار Lozad از Intersection Observer برای پیاده سازی Lazy loading تصاویر استفاده کرده است.

اطلاعات کلی در مورد ابزار Lozad

  • این ابزار حجم بسیار کمی دارد به طوری که حجم اون بعد از Minify و gzip شدن به 535 بایت تبدیل می شود.
  • هیچ پیش نیازی ندارد
  • از Intersection Observer API استفاده میکنه
  • به شما اجازه میده که علاوه بر Lazy Load کردن تصاویر، با استفاده از توابع سفارشی شده، المنتهای دیگه رو نیز لود کنید. مثلا میتونین تبلیغات، ویدیو، iframe و هر المنت دیگه ای رو به لطف Intersection Observer به راحتی در زمانی که به Viewport وارد میشن، لود کنید تا سایتتون بیشتر از گذشته بهینه بشه.
  • تصاویر واکنشگرا و تصاویر پس زمینه رو نیز میتونین با این روش لود کرده و مدیریت کنید
more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 30)

نحوه استفاده از این ابزار

در ابتدا باید یک فایل html درست کنید و فایل مربوط به این ابزار رو در اون لود کنید. ما در این آموزش از نسخه CDN استفاده میکنیم. بصورت زیر:

در کدهای HTML هر جا که میخواید تصویری بصورت Lazy loading لود بشه، باید کلاس lozad رو به اونا اضافه کنید. شما میتونین نام این کلاس رو متناسب با سلیقتون تغییر بدین و این کار رو میتونین با تغییر تنظیمات پیش فرض انجام بدین. بصورت پیش فرض باید کلاس lozad رو برای تصاویر قرار بدین. بصورت زیر:

میبینید که دو تصویر رو قرار دادیم و کلاسهای مورد نظر رو بهشون اضافه کردیم. اگر دقت کنید ما از ویژگی src برای تصاویر استفاده نکردیم و بجای اون ویژگی data-src رو قرار داده و آدرس تصویر مورد نظرمون رو به عنوان مقدار اون قرار دادیم. با این کار دیگه از همون اول که صفحه لود میشه تصاویر لود و نمایش داده نمیشن و تا زمانی که Javascript اجرا نشه و تصمیم به لود کردن تصاویر نگیره، خبری از تصاویر نیست. پس حواستون باشه در جاهایی مثل RSS و ... از این روش استفاده نکنید و اون رو به صفحات اصلی سایتتون محدود کنید.

حالا تنها کاری که باید بکنید اینه که در Javascript یک نمونه جدید از تابع lozad بسازید و اون رو در متغیر observer ذخیره کنید. حالا میتونین متد observe رو فراخوانی کنید تا همه کارهای مورد نظر برای شما بصورت اتوماتیک تحت نظر قرار بگیرن و زمانی که تصویر وارد Viewport شد، شروع به لود شدن بکند.

زمانی که هیچ اطلاعاتی رو به تابع lozad پاس نمیدید، مقادیر پیش فرض در نظر گرفته میشه. مثلا شما میتونین مقادیر پیش فرض این تابع رو بصورت زیر تغییر بدین:

میتونین بجای مقادیر بالا هر چیز دیگه رو قرار بدین و نام کلاس مورد نظر رو نیز عوض کنید.

تصاویر واکنشگرا و پس زمینه

میتونین بصورت زیر تصاویر واکنشگرا رو نیز تحت پوشش قرار بدین:

میبینید که علاوه بر data-src، ویژگی data-srcset رو نیز قرار دادیم.

اگر بخوایم تصویر پس زمینه رو بصورت Lazy لود کنیم:

میبینید که در اینجا از ویژگی data-background-image استفاده شده و آدرس تصویر پس زمینه درون اون قرار گرفته است.

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 50)

کارهای دیگری نیز میتونین با استفاده از این ابزار انجام بدین که خودتون میتونین اونا رو مطالعه کنید.

دموی زیر رو ببینید: با اسکرول کردن دموی بالا به سمت پایین، زمانی که تصویر مورد نظر درون Viewport قرار میگیره شروع به لود شدن میکنه. به همین راحتی.

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

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

یا علی

Source

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

نیاز به لاگین

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