Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Linkoteca. lazy load

The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values:

lazy: is a good candidate for lazy loading.
eager: is not a good candidate for lazy loading. Load right away.
auto: browser will determine whether or not to lazily load.

Not specifying the attribute at all will have the same impact as setting loading=auto.


<img src="myimage.jpg" loading="lazy" alt="..." />



lazy: works great for lazy loading
eager: instructs the browser to load the specified content right away

Using intersection observer

If you’ve written lazy loading code before, you may have accomplished your task by using event handlers such as scroll or resize. While this approach is the most compatible across browsers, modern browsers offer a more performant and efficient way to do the work of checking element visibility via the intersection observer API.