IntersectionObserver ha hecho que la carga diferida sea mucho más fácil y más eficiente de lo que solía ser, pero para hacerlo realmente bien, aún debe eliminar el src y tal, que es engorroso. Definitivamente no es tan fácil como:
<img src="https://css-tricks.com/native-lazy-loading/celebration.jpg" loading="lazy" alt="..." />Addy Osmani dice que vendrá en Chrome 75:
El loading El atributo permite que un navegador difiera la carga de imágenes fuera de la pantalla e iframes hasta que los usuarios se desplacen cerca de ellos. loading admite tres valores:
lazy: es un buen candidato para la carga diferida.eager: no es un buen candidato para la carga diferida. Cargue de inmediato.auto: el navegador determinará si se carga de forma diferida.
Probablemente terminaré escribiendo un filtro de contenido de WordPress para este sitio que agrega ese atributo para cada imagen de este sitio. Aleluya, digo, y gracias a otros navegadores.
La carga diferida fácil de imágenes tendrá el mayor impacto en el sitio en su conjunto, pero los iframes cargados de forma diferida serán aún mayores para los sitios individuales que los utilicen. Me gusta.
Sí, sí, cualquiera que sea la carga diferida nativa de imágenes, pero la carga diferida de iframes será un gran cambio de juego para la tecnología publicitaria: https://t.co/ADGc1UsVBf
– Laurie Voss (@seldo) 8 de abril de 2019
Espero que esto también impulse la necesidad de relaciones de aspecto nativas, ya que una de las principales razones es evitar que el contenido se redistribuya cuando las cosas se carguen más tarde. Sin embargo, ahora tenemos formas.
Si está buscando agregar carga diferida a los medios de su sitio en este momento, sería inteligente incluir estos atributos nativos de carga diferida, pero a partir de esta actualización (julio de 2019), el soporte en navegadores estables aún no existe. Querrá ver cómo hacer más:
- Una carga diferida nativa para la web
- La guía completa para la carga diferida de imágenes
- Consejos para rodar su propia carga diferida
- Lozad.js: carga perezosa de rendimiento de imágenes
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 77 | 97 | No | 79 | TP |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 95 | 96 | No |