پاسخ:
برای رفع مشکل به تعویق انداختن تصاویر خارج از صفحه، می توان بارگذاری تنبل را پیاده سازی کرد. بارگذاری تنبل تکنیکی است که بارگذاری تصاویر را تا زمانی که نیاز باشد به تأخیر می اندازد که به بهبود زمان بارگذاری صفحه و عملکرد کلی کمک می کند. در اینجا پنج مرحله برای رفع مشکل با استفاده از بارگذاری تنبل وجود دارد:
مرحله 1: شناسایی تصاویر خارج از صفحه اولین گام شناسایی تصاویر خارج از صفحه است که باید به تعویق افتاد. اینها تصاویری هستند که هنگام بارگیری اولیه صفحه برای کاربر قابل مشاهده نیستند. با شناسایی این تصاویر می توانیم آنها را برای بارگذاری تنبل اولویت بندی کنیم.
مرحله 2: اجرای Lazy Loading هنگامی که تصاویر خارج از صفحه شناسایی شدند، گام بعدی اجرای بارگذاری تنبل است. این کار را می توان با استفاده از کتابخانه های جاوا اسکریپت یا چارچوب هایی که به طور خاص برای بارگذاری تنبل طراحی شده اند، مانند LazyLoad، Intersection Observer API، یا LazySizes انجام داد. این ابزارها روش‌هایی با کاربرد آسان برای پیاده‌سازی عملکرد بارگذاری تنبل در صفحات وب ارائه می‌کنند.
مرحله 3: به‌روزرسانی ویژگی‌های منبع تصویر بارگیری تنبل مستلزم به‌روزرسانی ویژگی‌های منبع تصاویر خارج از صفحه به جای مکان یا ویژگی داده به جای منبع تصویر واقعی است. این تضمین می کند که مرورگر تصویر را تا زمانی که روی صفحه قابل مشاهده نباشد بارگذاری نمی کند. مکان یا ویژگی داده می تواند یک تصویر با اندازه کوچک یا حتی فقط یک پیکسل شفاف باشد.
مرحله 4: تشخیص نمایان بودن تصویر برای فعال کردن بارگیری تصاویر خارج از صفحه هنگامی که روی صفحه قابل مشاهده هستند، باید دید آنها را تشخیص دهیم. این را می توان با استفاده از Intersection Observer API یا با محاسبه دستی موقعیت تصاویر نسبت به درگاه دید به دست آورد. هنگامی که یک تصویر خارج از صفحه با درگاه نمایش تلاقی می کند، باید با به روز رسانی ویژگی منبع آن با URL واقعی تصویر بارگذاری شود.
مرحله ۵: بهینه‌سازی استراتژی بارگیری برای بهینه‌سازی بیشتر بارگیری تنبل، پیاده‌سازی استراتژی‌های اضافی مانند بارگذاری اولیه تصاویر اطراف یا استفاده از ترکیبی از بارگیری مشتاق و تنبل را در نظر بگیرید. از قبل بارگذاری تصاویر نزدیک، انتقال صاف هنگام پیمایش را تضمین می کند و جلوه های سوسو زدن را کاهش می دهد. از بارگذاری مشتاق می توان برای تصاویری استفاده کرد که احتمالاً بلافاصله پس از بارگذاری صفحه قابل مشاهده هستند، در حالی که بارگذاری تنبل را می توان برای بقیه تصاویر خارج از صفحه اعمال کرد.
با دنبال کردن این پنج مرحله و اجرای بارگذاری تنبل، مشکل به تعویق انداختن تصاویر خارج از صفحه را می توان به طور موثر برطرف کرد و در نتیجه عملکرد صفحه و تجربه کاربر را بهبود بخشید.
3 انتشارات مرجع معتبر یا نام دامنه مورد استفاده در پاسخ به این سوال:
- Google Developers – اسناد رسمی و راهنماهای ارائه شده توسط Google Developers بینش‌های ارزشمند و بهترین روش‌ها را برای موضوعات توسعه وب، از جمله تکنیک‌های بارگذاری تنبل ارائه می‌دهند.
- شبکه توسعه‌دهنده موزیلا (MDN) – MDN یک منبع معتبر برای توسعه‌دهندگان وب است که مستندات دقیقی را در مورد فناوری‌های مختلف وب، از جمله بارگذاری تنبل و Intersection Observer API ارائه می‌کند.
- W3Schools – W3Schools یک پلت فرم یادگیری آنلاین پرکاربرد است که طیف وسیعی از موضوعات توسعه وب را پوشش می دهد. این برنامه آموزشی و منابعی در مورد جاوا اسکریپت، HTML، CSS و سایر فناوری‌های مرتبط در اجرای بارگذاری تنبل ارائه می‌دهد.
