Atributo de carga de HTML <img>

Etiqueta <img> de HTML

Definición y uso

loading La propiedad determina si el navegador debe cargar inmediatamente la imagen o retrasar la carga de las imágenes fuera de la pantalla hasta que, por ejemplo, el usuario las desplace cerca de ellas.

Consejo:Por favor, añada solo loading="lazy" Añadir a la imagen ubicada debajo de la pantalla.

Ejemplo

Añadir carga diferida a la imagen inferior de la pantalla principal:

<img src="/i/photo/beijing.jpg" alt="北京" style="width:100%">
<img src="/i/photo/shanghai.jpg" alt="上海" style="width:100%">
<!-- Imagen fuera de la pantalla -->
<img src="/i/photo/wuhan.jpg" alt="武汉" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-1.jpg" alt="上海" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-2.jpg" alt="Shanghai" style="ancho:100%" loading="lazy">
<img src="/i/photo/shanghai-3.jpg" alt="Shanghai" style="ancho:100%" loading="lazy">
<img src="/i/photo/tiyugongyuan.jpg" alt="Parque deportivo" style="ancho:100%" loading="lazy">

Prueba por ti mismo

Sintaxis

<img src="URL" loading="eager|lazy">

Valor de atributo

Valor Descripción
eager Por defecto. Cargar imágenes inmediatamente.
lazy Cargar imágenes con retraso hasta que se cumplan ciertas condiciones.

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
77.0 79.0 75.0 No soportado 64.0

Etiqueta <img> de HTML