<a class="background-gif" href="#"> <picture> <img class="lazy-pic" src="img/white-placeholder.png" data-src="img/certificates/2.png"> </picture> </a>

La etiqueta img tiene un marcador de posición y un enlace tiene una clase "background-gif" que agrega la carga de gif como fondo. Cuando me desplazo a la imagen, obtengo el atributo de datos y lo pongo en src. Necesito agregar la clase "cargada" para vincular cuando se carga la imagen del atributo de datos y se eliminará la carga del gif de fondo.

 const container = '.background-gif' // it's for example only)) const lazyPic = container.querySelector('.lazy-pic'); lazyPic.setAttribute("src",lazyPic.getAttribute('data-src')); lazyPic.addEventListener("load", (e) => { container.classList.add("loaded"); })

Intenté usar el evento onLoad en img, pero si tiene un marcador de posición, el evento se activa antes de que se cargue la imagen. Si elimino el marcador de posición src, se producirán errores en el validador)) Entonces, ¿qué puedo hacer? La idea de poner el gif de carga como marcador de posición no es conveniente: tengo muchas imágenes con diferentes tamaños fijos, el gif debe tener el mismo tamaño en todas partes.