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

img tag has a placeholder and a link has a class "background-gif" that adds loading gif as a background. When I scroll to image, I get data-attribute and put it into src. I need to add "loaded" class to link when picture from data-attribute is loaded and loading background gif will be removed.

   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");
   })

I've tried to use onLoad event on img, but if it has a placeholder, event fires before picture is loaded. If i remove src placeholder it will cause mistakes in validator)) So, what can I do? The idea to put loading gif as a placeholder is not convenitent - I have a lot of pictures with different fixed sizes, gif should to be same size everywhere.