title: Background gif removes from lazy picture with placeholder before that picture is loaded
body: <pre><code>&lt;a class=&quot;background-gif&quot; href=&quot;#&quot;&gt;
       &lt;picture&gt;
            &lt;img class=&quot;lazy-pic&quot; src=&quot;img/white-placeholder.png&quot; data-src=&quot;img/certificates/2.png&quot;&gt;
       &lt;/picture&gt;
  &lt;/a&gt;
  </code></pre>
  <p>img tag has a placeholder and a link has a class &quot;background-gif&quot; 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 &quot;loaded&quot; class to link when picture from data-attribute is loaded and loading background gif will be removed.</p>
  <pre><code>   const container = '.background-gif' // it's for example only))
     const lazyPic = container.querySelector('.lazy-pic');
     lazyPic.setAttribute(&quot;src&quot;,lazyPic.getAttribute('data-src'));
     lazyPic.addEventListener(&quot;load&quot;, (e) =&gt; {
        container.classList.add(&quot;loaded&quot;);
     })
  </code></pre>
  <p>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.</p>