Puedo agregar el atributo loading="lazy" en imágenes individuales, o con JavaScript y aplicarlas todas a la vez.
Pero, cuando lo hago con JavaScript y luego inspecciono la página, veo que las imágenes se cargan al cargar la página, pero cada imagen tiene el atributo adjunto.
¿Por qué agregar loading="lazy" con HTML carga la imagen de forma perezosa, pero agregar el atributo con JavaScript no proporciona el comportamiento de carga diferida?
let img = document.querySelectorAll('img'); for (let i = 0; i < img.length; i++) { let images = img[i]; images.setAttribute('loading', 'lazy'); } img { max-width: 100%; height: auto; } .container { margin-top: 2000px; } <div class="container"> <img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24"> <img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b"> <img src="https://images.unsplash.com/photo-1494232410401-ad00d5433cfa"> </div>Es una especie de trampa 22. Debe ejecutar el JS antes que el HTML para establecer el atributo antes de que ya se esté cargando, pero no puede agregar un atributo a un elemento que no existe.
Puede intentar crear el elemento de imagen manualmente usando JS, luego agregar el atributo y luego agregarlo al dom.
Tal vez algo como esto:
const imgEl = document.createElement("img"); imgEl.src = "https://i.stack.imgur.com/ZCVxN.jpg?s=64&g=1" imgEl.setAttribute('loading', 'lazy'); const body = document.querySelector("body") body.appendChild(imgEl);