说一下图片的懒加载和预加载

[问答题]

说一下图片的懒加载和预加载

拯救世界的光太郎

懒加载：

懒加载，就是不需要显示的时候，即未滑至可视区域的时候，不加载，滑至可视区域的时候再去加载相对应的图片

让所有图片的src属性指向同一个地址。这样所有图片暂时显示的默认图片就只需要请求一次。给所有图片一个统一的自定义属性：data-src，值为每个img真正的地址，当滑至可视区域时，用js将data-src中的值换到src上，就可以显示真正的图片了

这样就可以起到一个减轻服务器前端压力的效果

<body>

  <div class="container">
    <img src="img/loading.png" data-src="img/photo-1.jpeg">
    <img src="img/loading.png" data-src="img/photo-2.jpeg">
    <img src="img/loading.png" data-src="img/photo-3.jpeg">
    <img src="img/loading.png" data-src="img/photo-4.jpeg">
    <img src="img/loading.png" data-src="img/photo-5.jpeg">
    <img src="img/loading.png" data-src="img/photo-6.jpeg">
    <img src="img/loading.png" data-src="img/photo-7.jpeg">
    <img src="img/loading.png" data-src="img/photo-8.jpeg">
  </div>
</body>
<script>
  start();
  $(window).on('scroll', function(){
    start();
  })

  function start(){
    //.not('[data-isLoaded]')选中已加载的图片不需要重新加载
    $('.container img').not('[data-isLoaded]').each(function(){
      var $node = $(this)
      if( isShow($node) ){
        loadImg($node);
      }
    })
  }

  //判断一个元素是不是出现在窗口(视野)
  function isShow($node){
    return $node.offset().top <= $(window).height() + $(window).scrollTop();
  }
  //加载图片
  function loadImg($img){
    $img.attr('src', $img.attr('data-src')); //把data-src的值 赋值给src
    $img.attr('data-isLoaded', 1); //已加载的图片做标记
  }

</script>

预加载：

提前将所有图片都加载下来，用的时候直接从本地取。这样服务器的压力会非常大，但是用户的体验会更好一些，因为不再需要等待图片加载了。

var arr = [
  '../picture/1.jpg',
  '../picture/2.jpg',
  '../picture/3.jpg',
];

var imgs =[]
preLoadImg(arr);

//图片预加载方法
function preLoadImg(pars){
  for(let i=0;i<arr.length;i++){
    imgs[i] = new Image();
    imgs[i].src = arr[i];
  }
}

编辑于 2021-10-29 11:23:42 回复(0)