title: browser downloading twice the images when lazy loading with js
body: <p>I am developing a website and I have a problem with lazy loading images.</p>
  
  <p>It was taking too much time to load the images so I checked the Browser Network Tab and I saw that Safari was loading multiple times the same image, slowing down the loading of the other media.</p>
  
  <p>I reproduced the code to make as simple as possible and when I lazy load images the browser load them twice.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  [data-src]{
    opacity: 0;
    transition: all .4s ease;
  }
  [data-src].vis{
    opacity: 1;
  }
  &lt;/style&gt;
  
  &lt;img data-src="https://via.placeholder.com/150/045b1f/ffff11" src="dot.png"&gt;
  &lt;img data-src="https://via.placeholder.com/150/045b44/ffff22" src="dot.png"&gt;
  &lt;img data-src="https://via.placeholder.com/150/045b77/ffff33" src="dot.png"&gt;
  &lt;img data-src="https://via.placeholder.com/150/045b00/ffff44" src="dot.png"&gt;
  
  &lt;script type="text/javascript"&gt;
  
    function lazy(){
      $('[data-src]').each(function(){
        var $img = $(this);
        var src = $img.attr('data-src');
        var img = new Image();
        img.src = src;
        $(img).on('load', function(){
          console.log('loaded',src);
          $img.attr('src',this.src);
          $img.addClass('vis');
        });
      });  
    }
  
    jQuery(function($){
  
      setTimeout(function(){
        lazy();
      },3000)
  
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>I also made a CodePen <a href="https://codepen.io/nbl7/pen/GaoZXW" rel="nofollow noreferrer">https://codepen.io/nbl7/pen/GaoZXW</a></p>
  
  <p>On my website this happen only on Safari and it loads the same image even 10 times. Probably because I call the lazy load function different times. </p>
  
  <p>On the code I provided it happens also on Chrome.</p>
  
  <p>Should the browser know already which image has been loaded and cache them without making new requests?</p>
  
  <p>Thanks for the help.</p>