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

[问答题]

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

拯救世界的光太郎

懒加载：

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

让所有图片的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)

牛客958379号

欢迎补充

懒加载懒加载，就是看到图片的时候再去进行加载。

懒加载对应原理

先给图片 src 不赋值，等视图区域滚动到它的时候，给它的 src 赋值为正确的 url 以达到当下被加载。

场景

一个相册页面，滑到对应相片区的时候才去加载这些照片

预加载，就是图片可能会被用户查看，先给它加载了，等用户查看的时候，能够很快显示。

预加载原理

图片刚开始是不被显示的，通过获取 img 元素的 src, js new img 赋值 src 实现加载图片，这样等用户查看的时候，图片被显示了，能够直接显示。

场景

一个缩虐图点击，展示大图。预先加载大图，实现预览流畅

编辑于 2019-04-13 12:12:00 回复(0)

火柴哥

<p>预加载：提前对图片进行加载，当使用者翻到相关区域是就可以直接在缓存中请求。但是预加载会加大服务器的压力</p><p>懒加载：只有在页面需要显示时才进行加载，这样可以避免过多的网络请求，优化前端性能</p>

编辑于 2020-06-03 21:27:11 回复(0)

提交观点

问题信息

上传者：小小

难度：

3条回答 144收藏 816浏览