چگونه تصاویر را در صفحات وب بصورت lazy بارگذاری کنیم؟

اتریبیوت بارگذاری

به کمک اتریبیوت loading می توانید حالت بارگذاری و نمایش تصاویر و یا iframe را در صفحه را تعیین کنید به این صورت که این اتریبیوت تعیین می کند محتوای تصویر یا iframe بسرعت بارگذاری شود (eager) یا آنکه مرورگر فقط درصورتی که داخل صفحه نمایش مرورگر قرار گیرند یا به عبارت دیگر کاربر به سمت آنها اسکرول کند بارگذاری شوند (lazy) در این صورت با کاهش حجم صفحه وب بارگذاری شده زمان بارگذاری صفحه کاهش می یابد و البته میزان کمتری از پهنای باند استفاده می شود. به مثال زیر توجه کنید:

<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

در حالت بالا از حالت lazy یا تنبل استفاده شده که در نتیجه المان فقط درصورت که به سمت آنها اسکرول شود لود می شود.

توجه شود برای مرورگر های قدیمی که از این اتریبیوت پشتیبانی نمی کنند می توانید از loading-attribute-polyfill کمک بگیرید.

محمد عنبرستانیمشاهده نوشته ها

Avatar for محمد عنبرستانی

توسعه دهنده و طراح وب و همچنین مهندس عمران هستم و البته به موضوعاتی مثل برندینگ، طراحی آرم (لوگو)، رسم و نقاشی، معماری و سایر هنر های بصری علاقه مند هستم! اینجا سعی می کنم اطلاعات مفید و آموزنده که در زمینه کاریم و علایقم هستن رو با شما به اشتراک بگذارم.

بدون دیدگاه

دیدگاهتان را بنویسید