Question

我正在开发一个网站，但是在延迟加载图像时遇到了问题。

加载图像花了太多时间，所以我检查了浏览器网络选项卡，发现Safari加载同一图像的次数是多次，从而减慢了其他媒体的加载速度。

我重现了代码以使其尽可能地简单，当我延迟加载图像时，浏览器将其加载两次。

<style type="text/css">
[data-src]{
  opacity: 0;
  transition: all .4s ease;
}
[data-src].vis{
  opacity: 1;
}
</style>

<img data-src="https://via.placeholder.com/150/045b1f/ffff11" src="dot.png">
<img data-src="https://via.placeholder.com/150/045b44/ffff22" src="dot.png">
<img data-src="https://via.placeholder.com/150/045b77/ffff33" src="dot.png">
<img data-src="https://via.placeholder.com/150/045b00/ffff44" src="dot.png">

<script type="text/javascript">

  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)

  });
</script>

我还制作了一个CodePen https://codepen.io/nbl7/pen/GaoZXW

在我的网站上，这种情况仅发生在Safari上，并且甚至可以加载10次相同的图像。可能是因为我在不同时间调用了惰性加载函数。

在我提供的代码上，它也在Chrome上发生。

浏览器是否应该已经知道加载了哪个图像并缓存它们而没有发出新请求？

感谢您的帮助。

Answer 1

以下代码不会两次加载图像：

function lazy() {
  $('[data-src]').each(function() {
    var img = this;
    var src = $(img).attr('data-src');
    $(img).attr('src', src);
    $(img).on('load', function() {
      console.log('loaded', src);
      $(img).addClass('vis');
    });
  });
}

jQuery(function($) {
  // lazy();
  setTimeout(function() {
    lazy();
  }, 3000)

});

[data-src] {
  opacity: 0;
  transition: all .4s ease;
}

[data-src].vis {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img data-src="https://via.placeholder.com/150/045b1f/ffff11" src="">
<img data-src="https://via.placeholder.com/150/045b44/ffff22" src="">
<img data-src="https://via.placeholder.com/150/045b77/ffff33" src="">
<img data-src="https://via.placeholder.com/150/045b00/ffff44" src="">

您在循环中设置了 img src 两次，这意味着它将加载两次：

在此行上： img.src = src; （第6行）
然后在此行： $ img.attr（'src'，this.src）; （第9行）

延迟加载js时，浏览器下载两次图像

1 个答案: