懒加载

懒加载的概念

懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。

在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果使用图片的懒加载就可以解决以上问

题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长

列表）的场景中。

懒加载的特点

减少无用资源的加载

使用懒加载明显减少了服务器的压力和流量，同时也减小了浏览器的负担

提升用户体验

如果同时加载较多图片，可能需要等待的时间较长，这样影响了用户体验，而使用懒加载就能大大的提高用户体验。

防止加载过多图片而影响其他资源文件的加载

懒加载的实现原理

图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。

根据这个原理，我们使用HTML5 的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。

懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时，获取图片的真实地址并赋值给图片即可。

使用原生JavaScript实现懒加载


window.innerHeight 是浏览器可视区的高度

document.body.scrollTop || document.documentElement.scrollTop 是浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离

imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）

图片加载条件：img.offsetTop < window.innerHeight + document.body.scrollTop;

代码实现

<body>
    <div class="container">
        <h6>图片懒加载</h6>
        <img data-src="/images/login-bg-3.jpg" src="/images/login-bg-4.jpg"><br>
        <img data-src="/images/login-bg-1.jpg" src="/images/login-bg-4.jpg"><br>
        <img data-src="/images/login-bg.jpg" src="/images/login-bg-4.jpg"><br>
        <img data-src="/images/login-bg-3.jpg" src="/images/login-bg-4.jpg"><br>
        <img data-src="/images/login-bg-old.jpg" src="/images/login-bg-4.jpg"><br>
        <img data-src="/images/login-bg-1.jpg" src="/images/login-bg-4.jpg"><br>
        <img data-src="/images/login-bg.jpg" src="/images/login-bg-4.jpg"><br>
    </div>
</body>
<script>
    var imgs = document.querySelectorAll('img')
    function lazyLoad() {
        var scrollTop = document.body.scrollTop || document.decumentElement.scrollTop
        var windowHeight = window.innerHeight
        for (var i = 0; i < imgs.length; i++) {
            if (imgs[i].offsetTop < scrollTop + windowHeight) {
                imgs[i].src = imgs[i].getAttribute('data-src')
            }
        }
    }
    window.onscroll = lazyLoad()
</script>

getBoundingClientRect API 实现 

 

 

 

 

代码实现

  data(){
    return{
      flag: true
    }
  },
  created() {
    //this.lazyL          oad();
    this.throttle(this.lazyLoad, 3000)()  //首次进入加载
  },
  mounted() {
    const that = this;
    window.addEventListener('scroll',()=>{
       that.throttle(that.lazyLoad, 2000)()
     //that.lazyLoad()
    })
  },
  methods:{
    //节流优化
    throttle(fn, delay){
      const that = this;
      return function () {
        if (!that.flag) return;
        that.flag = false;  //没执行过就一直是false，会直接return
        setTimeout(() => {
          fn.apply(that, arguments);
          that.flag = true; //setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
        }, delay);
      }
    },
    lazyLoad(){
      let images = document.getElementsByTagName('img')  //不是数组，htmlCollection遍历时要注意
      //加定时器的目的是为了让images能够遍历到
      setTimeout(()=>{
        for(let i =0;i<images.length;i++){
          if(images[i].getBoundingClientRect().top<document.body.clientHeight){   //getBoundingClientRect().top 元素的上边相对浏览器视窗的位置如果小于可视窗口的高度
            images[i].src = images[i].dataset.src;
          }
        }
      },300)
    }
  } 

懒加载与预加载的区别

这两种方式都是提高网页性能的方式，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

懒加载

懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。它

适用于图片很多，页面很长的电商网站的场景。懒加载的实现原理是，将页面上的图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，

进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性，以此来实现图片的延迟加载。

预加载

预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。通过预加载能够减少用户的等待时间，提高用户的体验。我了解的预加载的最常用的方

式是使用 js 中的 image 对象，通过为 image 对象来设置 src属性，来实现图片的预加载。

 

 参考文章：

(38条消息) 图片懒加载的几种实现方式_Wonder*的博客-CSDN博客_图片懒加载的实现方式

posted @ 2022-05-29 17:35  yeqi7  阅读(76)  评论(0)    收藏  举报