图片的懒加载是怎么实现的

最新推荐文章于 2024-05-30 17:38:42 发布

teng28

最新推荐文章于 2024-05-30 17:38:42 发布

阅读量867

点赞数

分类专栏：前端基础文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_43359799/article/details/123132749

版权

前端基础专栏收录该内容

43 篇文章 1 订阅

订阅专栏

图片的懒加载是怎么实现的

为什么要使用懒加载？
- 对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。
- 所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

原理

将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      img {
      display: block;
      margin-bottom: 50px;
      width: 400px;
      height: 400px;
      }
  </style>
  </head>
  
  <body>
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
  <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
  
  </body>

  <script>
  var num = document.getElementsByTagName('img').length;
  var img = document.getElementsByTagName("img");
  var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
  
  lazyload(); //页面载入完毕加载可是区域内的图片
  
  window.onscroll = lazyload;
  
  function lazyload() { //监听页面滚动事件
      var seeHeight = document.documentElement.clientHeight; //可见区域高度
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
      for (var i = n; i < num; i++) {
      if (img[i].offsetTop < seeHeight + scrollTop) {
          if (img[i].getAttribute("src") == "default.jpg") {
          img[i].src = img[i].getAttribute("data-src");
          }
          n = i + 1;
      }
      }
  }
  </script>
  ```
  ```javascript
  <script>
  var n = 0,
      imgNum = $("img").length,
      img = $('img');
  
  lazyload();
  
  $(window).scroll(lazyload);
  
  function lazyload(event) {
      for (var i = n; i < imgNum; i++) {
      if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
          if (img.eq(i).attr("src") == "default.jpg") {
          var src = img.eq(i).attr("data-src");
          img.eq(i).attr("src", src);
  
          n = i + 1;
          }
      }
      }
  }
  </script>

性能优化

如果直接将函数绑定在scroll事件上，当页面滚动时，函数会被高频触发，这非常影响浏览器的性能。
使用节流函数进行性能优化

  // 简单的节流函数
  //fun 要执行的函数
  //delay 延迟
  //time 在time时间内必须执行一次
  function throttle (fun, delay, time) {
  let timeout
  
  let startTime = new Date()
  
  return function () {
  let context = this
  
  let args = Array.prototype.slice.call(arguments)
  
  let curTime = new Date()
  
  clearTimeout(timeout)
  if (curTime - startTime >= time) {
      // 如果达到了规定的触发时间间隔，触发 handler
      fun.apply(context, args)
      startTime = curTime
  } else {
      // 没达到触发间隔，重新设定定时器
      timeout = setTimeout(function () {
          fun.apply(context, args)
      }, delay)
  }
  }
  };
  // 实际想绑定在 scroll 事件上的 handler
  function lazyload(event) {}
  // 采用了节流函数
  window.addEventListener('scroll',throttle(lazyload,500,1000));