HTML <img> loadingAtributo
Ejemplo
Agregue carga diferida a varias imágenes en la parte inferior de la página; solo se mostrarán cuando el mouse se desplace hasta la posición de la imagen:
<img src="/images/wedding.jpeg" alt="Wedding" style="width:100%">
<img src="/images/rocks.jpeg" alt="Rocks" style="width:100%">
<!--Configurar la imagen con carga diferida-->
<img src="/images/paris.jpeg" alt="Paris" style="width:100%" loading="lazy">
<img src="/images/nature.jpeg" alt="Nature" style="width:100%" loading="lazy">
<img src="/images/underwater.jpeg" alt="Underwater" style="width:100%" loading="lazy">
<img src="/images/ocean.jpeg" alt="Ocean" style="width:100%" loading="lazy">
<img src="/images/mountainskies.jpeg" alt="Mountains" style="width:100%" loading="lazy">
Pruébalo »
Soporte del navegador
| Atributo | |||||
|---|---|---|---|---|---|
| loading | 77.0 | 79.0 | 75.0 | Not Supported | 64.0 |
Definición y uso
El atributo loading especifica si el navegador debe cargar la imagen inmediatamente o cargarla de forma diferida.
Configurarloading="lazy"Solo se mostrará cuando el mouse se desplace hasta la posición de la imagen.
Sintaxis
<img src="URL.html" loading="eager|lazy">
Valor de atributo
| Valor | Descripción |
|---|---|
| eager | Por defecto, la imagen se carga inmediatamente. |
| lazy | La imagen se carga de forma diferida; solo se mostrará cuando el mouse se desplace hasta la posición de la imagen. |
Etiqueta HTML <img> Otras extensiones