سلام دوستان عزیز برنامه نویس و توسعه دهندهی فرانت اند. امیدوارم حالتون خوب باشه و الان دارم از پشت لبتابم میخونمتون که امکانش هست چقدر هیجان زده باشید در مورد تیتر این نوشته. وقتی تصمیم گرفتم این رو بنویسم که شنیدم مرورگرهای جدید دارن یه قابلیت جدید برای image lazy loading به خودشون اضافه میکنند که در ادامه نحوه استفاده از اون رو میخوانید.
برای کسانی که نمیدونند lazy loading چی هست، باید بگم که شما میتونید قسمت های مختلف سایت رو بعد از لود شدن سایتتون و بر حسب نیاز بالا بیارید تا اینطور کاربر شما به خاطر دانلود همهی قسمت های سایت، موقع وارد شدن به سایت آزده نشه و برعکس، حس بهتری داشته باشه.
شما میتونید به وفور این رو توی سایت های مختلف و بزرگ و سنگین مشاهده کنید.
و اما عکس ها هم از این موضوع جدا نیستند و سال های گذشته، افرادی بستههای نرم افزاری مختلفی رو برای این امر نوشتن و استفاده کردند اما، یه مدت کوتاهی هست که مرورگر ها دارن از lazy loading به صورت اتوماتیک پشتیبانی میکنند و مشکل این روشهم همینه که مدت زیادی نیست ارایٔه شده و همهی مرورگر ها اون رو پشتیبانی نمیکنند اما به زودی شاهد این خواهیم بود که توی هر مرورگری میتونیم این ویژگی دلچسب رو ببینیم.
قدیما مجبور بودیم از انواع ترفند ها یا کتابخانه استفاده کنیم تا بتونیم این ویژگی رو برای سایت ها بنویسیم و استفاده کنیم که خوب مشکلات زیادی رو هم همراه داشت و مثلا ممکن بود کاربر جاوا اسکریپت مرورگرش رو خاموش کرده باشه، اون وقت اصلا عکسی لود نمیشد. به هر حال اون دوران گذشت و مدتی هست که مرورگرها شروع کردند تا این قابلیت رو به صورت سمت مرورگر در اختیار ما بگذارند و اتفاقا اتفاق خوبیه و در ادامه میتونید نحوه استفاده از این ویژگی رو بخوانید.
همهی چیزی که شما باید نحوهی استفاده از این attribute (نتونستم معنی فارسی درستی پیدا کنم) رو بدونید اینکه که شما باید به تگ img یک attribute به اسم loading با یکی از مقادی زیر اضافه کنید و همینطور که میدونید استفاده از اون خیلی راحته و البته بگم این که چه جوری این attribute رو به تگهای img اضافه میکنید مهمه و به خودتون بر میگرده.
سه تا مقدار داره این attribute که به قرار زیر هست:
نکته : بهتره همیشه مقادیر height و width رو برای عکستون تعریف کنید تا مرورگر بتونه بر اساس اون درست زمان لود شدن عکس رو هنگام اسکرول کاربر تعریف کنه.
نحوه استفاده این attribute با عکس هاتون:
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
اگر از تگ picture برای عکسهاتون استفاده میکنید نیازی نیست برای تگ های سورس از این attribute استفاده کنید و فقط اون رو برای تگ img بکار ببرین و اینطور مرورگر میتونه خودش مقدار مناسب رو انتخاب کنه و اون رو به صورت lazy لود کنه.
<picture> <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x"> <img src="photo.jpg" loading="lazy"> </picture>
این ویژگی تقریبا توسط همه مرورگرهای جدید مثل کروم، ادج، اوپرا و فایرفاکس پشتیبانی میشه و شما توی نسخههای جدید این مرورگر ها مشکلی برای استفاده ازش ندارید. اما مرورگر های وبکیت مثل سافاری هنوز در حال توسعه این قابلیت هستند و بزودی میتونید این قابلیت رو هم برای این مرورگر ها ببینید.
شاید شما این سوال براتون پیش بیاد که من چرا باید از این ویژگی استفاده کنم؟ خوب جوابش خیلی راحته !
با استفاده از این ویژگی که توی خود مرورگر استفاده شده، شما زمان زیادی هم برای خودتون و هم برای کاربرتون ذخیره و بهینه کردین بدون انجان دادن کار زیاد در ضمن اگر کاربر شما Javascript رو غیر فعال کرده باشه هم این قابلیت براشون کار میکنه.
به راحتی چک میکنیم میبینیم مرورگر این قابلیت رو پشتیبانی میکنه یا نه و اگر پشتیبانی نمیکرد سریع از ( polyfill ) های آماده استفاده میکنیم که حتما در آخر همین مقاله قرارشون میدم.
برای چک کردن این قابلیت از این کد استفاده کنید ( یا هر کدی دیگه ای ... ) :
if ('loading' in HTMLImageElement.prototype) { // اتریبیوت لودینگ رو به تگ عکس هاتون اضافه کنید. } else { // اینجا هم بهتره برای کاربرانی که از مرورگر های قدیمی استفاده میکنن راه حلی داشته باشید. }
توی این قسمت تمام کتابخونه ها و یک سری لینک که میتونه کمک کننده باشه براتون قرار میدم و امیدوارم که از این مطلب لذت برده باشین و همینطور مشتریاتون هم از سرعت لود شدن سایتتون لذت ببرن.
اگر هم شما دوستان لینک جالب و بدرد بخوری رو برای این موضوع در نظر دارین ممنون میشم توی کامنت ها و نظرات برای استفاده دیگران قرارش بدین.