目录

什么是图片懒加载

图片懒加载的实现

原理

实现过程

另一种方式

什么是图片懒加载

当我们访问一个图片展示比较多的网页时，加载速度慢很多时候正是因为图片多导致，大量的img图片导致页面渲染的堵塞。而且若用户只查看了网页的前面部分便离开，许多已经加载却因为处于网页底部而未呈现在视口区的图片，它们极大加重服务器压力但是用户看都没看，白白浪费了性能。为了解决这些的问题，就需要引入图片懒加载，懒加载其实很好理解，重点就是一个‘懒'字。当用户滚动相应可视区域，若可视区域有图片便加载，而在可视区域外未加载过的图片它们先不加载，如果用户滚动可视区域到它们时它们再加载，否则一律不加载。这样一来就大大提高了网页渲染的性能和减少不必要的浪费。

图片懒加载的实现

原理

我们可以通过用图片的上端到视口上端的距离和视口高度作比较，如果小于视口高度，那么说明图片在视口中，所以这个图片就要加载，反之则不加载

实现过程

首先我们给img标签加上h5的自定义属性，自定义属性以data-开头，目的是为了保存并能使用数据，例如

<img data-src="./1.png" alt="">

这样就给img标签加上了自定义属性，并将1.png保存在里面

然后我们通过js来判断视口和图片的关系

        let imgs = document.querySelectorAll('img')   //获取所有的图片标签
        window.addEventListener('scroll',function(){   //给页面添加滚动事件
            imgs.forEach(item => {   //遍历所有的图片标签
            let imgTop = item.getBoundingClientRect().top   //获取到图片上端到视口上端的距离
            if(imgTop < window.innerHeight){   //如果这个距离小于视口宽度，即图片在视口中
                let src1 = item.getAttribute('data-src')  //将自定义属性获取出来
                item.setAttribute('src',src1)   //然后将自定义属性赋值给src属性
            }
        })
        })

这样就实现了图片的懒加载

另一种方式

Intersection Observer