браузер загружает дважды изображения при ленивой загрузке с помощью js - PullRequest
Новая
       20

браузер загружает дважды изображения при ленивой загрузке с помощью js

2 голосов
/ 09 мая 2019

Я занимаюсь разработкой веб-сайта, и у меня возникла проблема с отложенной загрузкой изображений.

Загрузка изображений заняла слишком много времени, поэтому я проверил вкладку «Сеть браузера» и увидел, что 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.

Должен ли браузер уже знать, какое изображение было загружено, и кэшировать его без новых запросов?

Спасибо за помощь.

1 Ответ

1 голос
/ 09 мая 2019

Вот код, который не загружает изображения дважды: 

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)

...