title: Lazysizes fails at lazy loading background images
body: <p>I use <a href="https://github.com/aFarkas/lazysizes" rel="noreferrer">lazysizes</a> library for the lazy loading of images. A span holds the actual image src and an <code>img</code> tag is kept in the page source for better SEO.</p>
  
  <p>The <code>img</code> is working well that <code>src="/resources/FolderIMAGES/795_t.JPG"</code> is correctly added when visible to the user, but adding the event listener  for background images put onto <code>span</code> elements fires the loading of all images even if those are not visible to the user...  </p>
  
  <p>Some people on lazysizes repository issue hub said in a comment that it is the normal behavior for <code>lazybeforeunveil</code> event which fires even when the image is not visible.</p>
  
  <p>So my question is, what is the correct event to detect when an image gets  visible and how should I pass the <code>data-bg</code> attribute value to fill the <code>backgroundImage</code> style property ? Given the documentation says that <code>lazybeforeunveil</code> should be used to handle background images lazyload.</p>
  
  <p>I don't know if it influences anything but the img had <code>display: none</code> and changed to <code>height: 0px !important;width: 0px !important;</code> so that lazysizes could detect the images.</p>
  
  <pre><code>document.addEventListener('lazybeforeunveil', function(e){
      var bg = e.target.getAttribute('data-bg');
      if(bg){
          e.target.style.backgroundImage = 'url(' + bg + ')';
      } });
  
  &lt;img itemprop="image" class=" lazyloaded" data-src="/resources/FolderIMAGES/795_t.JPG" title="Anel Magnético G2 - Wizard Pk Ring" alt="Anel Magnético G2 - Wizard Pk Ring" &gt;
  
  &lt;span class="image lazyloaded" data-bg="/resources/FolderIMAGES/795_t.JPG  " alt="Anel Magnético G2 - Wizard Pk Ring" title="Anel Magnético G2 - Wizard Pk Ring"&gt;&lt;/span&gt;
  </code></pre>