آکادمی اسکیلدآپ
خودت رو ارتقا بده!

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

0 4

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

به کمک اتریبیوت 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 کمک بگیرید.

ارسال یک پاسخ