Native Lazy Loading Image for Web

yess… native lazy load image for web. coba lihat script di atas… ada attribut loading pada tag img. Selama ini kita kalo mau melakukan lazy loading kita pake plugin kan? jQuery kan? … nah ini nih ada cara native loh…
dan ini berlaku untuk tag img dan iframe.

loading attribute ini akan bekerja ketika halaman di scroll ke img atau frame yang memakai loading ini. loading support 3 value :

1. lazy: ini untuk lazy loading.
2. eager: load langsung.
3. auto: browser yang akan menentukan lazy load atau tidak.

jika tidak ada attribute loading maka dianggap auto. Berikut adalah contoh script nya..

<!-- Lazy-load an offscreen image when the user scrolls near it -->
<img src="unicorn.jpg" loading="lazy" alt=".."/>

<!-- Load an image right away instead of lazy-loading -->
<img src="unicorn.jpg" loading="eager" alt=".."/>

<!-- Browser decides whether or not to lazy-load the image -->
<img src="unicorn.jpg" loading="auto" alt=".."/>

<!-- Lazy-load images in <picture>. <img> is the one driving image 
loading so <picture> and srcset fall off of that -->
<picture>
  <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" loading="lazy">
</picture>

<!-- Lazy-load an image that has srcset specified -->
<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf" loading="lazy">

<!-- Lazy-load an offscreen iframe when the user scrolls near it -->
<iframe src="video-player.html" loading="lazy"></iframe>

dan tahukan saudara-saudara bahwa fitur ini direncanakan akan support di chrome 75. itu kata bang Addy Osmani sebagai Engineering Manager at Google working on Chrome. Jadi sabar saja ya… tunggu tanggal main nya di qodrbee ya. cheers… ;p

referensi  https://addyosmani.com/blog/lazy-loading/

Incoming search terms:

• auth-web woowa in (1)