En este artículo, discutiremos el atributo de carga HTML img. Este atributo maneja cómo se cargará una imagen en una página web. Acepta tres valores de string, a saber, automático, ansioso y perezoso.
Atributo de carga diferida: esta estrategia se utiliza para identificar recursos como no críticos y los recursos se cargarán solo cuando sea necesario. En otras palabras, la carga diferida difiere la carga del contenido de la página web siempre que no sea necesario. Esta técnica ayuda a optimizar la página y permite que se carguen más tarde. Por lo general, el tamaño de la imagen es grande en la página web. Para esto, la carga diferida puede ser útil para diferir las imágenes fuera de pantalla. Consulte ¿Qué es la carga diferida? artículo.
Sintaxis:
<img src="url" loading="auto|eager|lazy">
Valores de atributos:
- auto: es un comportamiento predeterminado de carga diferida del navegador, en el que el navegador determinará la carga diferida de contenidos.
- ansioso: la imagen correspondiente se cargará sin demora, es decir, cargará los recursos de inmediato, independientemente de dónde se encuentre en la página.
- lazy: Retrasa la carga de la imagen que le corresponde hasta que el navegador especifica que se espera que aparezca en breve. Puede ayudar a optimizar el tiempo de carga de una página web, posponiendo la carga de imágenes hasta que se espere que aparezcan, en lugar de cargarlas de una vez.
Usaremos estos valores de atributo para ver los cambios en cada caso a través de los ejemplos.
Ejemplo 1: Este ejemplo ilustra el uso del atributo perezoso.
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Lazy Loading Images Attribute</title>
<style>
img {
height: 200px;
width: 200px;
display: block;
margin: 10px;
}
</style>
</head>
<body>
<h1>Lazy Loading Attribute</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073836/gfg1.png"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073837/gfg2.png"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073838/gfg3-300x300.png"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073839/gfg4-200x200.jpg"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073840/gfg5-200x200.png"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073841/gfg6-200x151.jpg"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073842/gfg7-200x200.jpg"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073843/gfg8-200x200.png"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073844/gfg9-300x43.png"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073845/gfg10.png"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073845/gfg11-300x300.jpg"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073847/gfg12-200x112.png"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073848/gfg13.jpg"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073849/gfg14-200x200.png"
loading="lazy"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png"
loading="lazy"
alt="gfg"/>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo ilustra el uso de los atributos de carga automática y rápida.
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Image Loading Attribute</title>
<style>
img {
height: 200px;
width: 200px;
display: block;
margin: 10px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>Auto Loading Attribute</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073836/gfg1.png"
loading="auto"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073837/gfg2.png"
loading="auto"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073838/gfg3-300x300.png"
loading="auto"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073839/gfg4-200x200.jpg"
loading="auto"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073840/gfg5-200x200.png"
loading="auto"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073841/gfg6-200x151.jpg"
loading="auto"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073842/gfg7-200x200.jpg"
loading="auto"
alt="gfg"/>
<h1>Eager Loading Attribute</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073843/gfg8-200x200.png"
loading="eager"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073844/gfg9-300x43.png"
loading="eager"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073845/gfg10.png"
loading="eager"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073845/gfg11-300x300.jpg"
loading="eager"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073847/gfg12-200x112.png"
loading="eager"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073848/gfg13.jpg"
loading="eager"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073849/gfg14-200x200.png"
loading="eager"
alt="gfg"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png"
loading="eager"
alt="gfg"/>
</body>
</html>
Producción:
NOTA: En navegadores como Chrome, la carga de la imagen es instantánea, por lo que es posible que no pueda distinguirla. Pero el tiempo de carga está optimizado.
Navegadores compatibles:
- Chrome 77.0 y superior
- Edge 79.0 y superior
- Firefox 75.0 y superior
- Ópera 64.0 y superior
- Safari 15.4 y superior