پشتیبانی از Lazy Loading تصاویر در مرورگرها
مرورگرهای وب بیش از پیش وارد حوزههایی خارج از نقش سنتی خود میشوند. در آخرین این تغییرات، مرورگرهای گوگل کروم و فایرفاکس در حال پیادهسازی قابلیت Lazy Loading برای تصاویر هستند.
این قابلیت اکنون در گوگل کروم فعال شده است و در نگارش ۷۵ فایرفاکس هم که به زودی منتشر میشود، پیادهسازی شده است.
Lazy Loading چیست ؟
هر صفحه وب شامل دهها فایل جانبی مثل فایلهای جاوااسکریپت و CSS و تصاویر و فیلم است. اگر این منابع جانبی همه به صورت یکجا در زمان شروع به پیمایش صفحه، بارگزاری شوند دو مشکل ایجاد میشود.
- استفاده بیمورد از پهنای باند اینترنتی و پهنای باند سرور در حالی که ممکن است همه این منابع واقعا مورد استفاده قرار نگیرند.
- کاهش سرعت بارگزاری اولیه صفحات به دلیل انتظار برای دریافت فایلهای زیاد با حجم زیاد.
تکنیک Lazy Loading یا بارگزاری دیرهنگام با هدف به تاخیر انداختن بارگزاری تک تک منابع تا زمانی که واقعا به آنها نیاز باشد، کار میکند. برای مثال اگر یک تصویر در بخش پایین سایت استفاده شده باشد، تا زمانی که کاربر صفحه را حرکت ندهد و به پایین سایت نرود، این تصویر بارگزاری نمیشود.
Lazy Loading در مرورگرها
پیش از این با استفاده از کدهای جاوااسکریپت، کار بررسی نیاز کاربران به تصاویر بررسی میشد و فقط زمانی که به تصویری نیاز بود، آن تصویر نمایش داده میشد. با تغییراتی که در مرورگرهای گوگل کروم و فایرفاکس به انجام خواهد رسید، این کار به صورت هوشمند توسط مرورگرها عملی میشود.
مزیت استفاده از امکانات مرورگر به جای جاوااسکریپت این است که این روش کارآمدتر و دقیقتر است. استفاده از جاوااسکریپت خود باری اضافی روی صفحات ایجاد میکند که ممکن است باعث اتلاف انرژی به ویژه روی گوشیهای موبایل باشد.
نمایش تصاویر و iframe به صورت Lazy
در آخرین نگارش مرورگر کروم، این قابلیت به شکل زیر پیادهسازی شده است و احتمال دارد تا مرورگرهای دیگر هم به تدریج این قابلیت را اضافه کنند. در حال حاضر استفاده از این قابلیت میتواند مفید باشد و در صورت عدم پشتیبانی مرورگر هم مشکلی برای سایت ایجاد نمیکند.
1 2 |
<img loading="lazy" src="..." alt="..."> <iframe loading="lazy" src="..."> |