js实现图片懒加载

js实现图片懒加载

1、介绍getBoundingClientRect()函数

该函数没有参数，用于获取元素位置，返回一个对象，具有六个属性分别是：
ele.getBoundingClientRect().top – 返回元素上边到视窗上边的距离
ele.getBoundingClientRect().left – 返回元素左边到视窗左边的距离
ele.getBoundingClientRect().bottom – 返回元素下边到视窗上边的距离
ele.getBoundingClientRect().right – 返回元素右边到视窗左边的距离

示例

<style>
    div {
        position:relative;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 120px;  
        border: 1px solid #000;                                                                                                
    }
style>
<div>
    啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊
    啊啊啊啊啊啊啊啊
div>
<script>
     let div = document.querySelector("div");
     console.log("left:", div.getBoundingClientRect().left);
     console.log("right:", div.getBoundingClientRect().right);
     console.log("top:", div.getBoundingClientRect().top);
     console.log("bottom:", div.getBoundingClientRect().bottom);
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

控制台打印结果

实现图片懒加载

将img的src属性值写进data-src中，监听页面滚动事件，当图片可以看见，也就是说img元素顶部距离视窗顶部距离小于视窗高度，则加载data-src中的图片路径，当img元素不能看见的时候，即img元素顶部距离视窗顶部距离小于视窗大小的时候，则不加载图片路径

示例

<img data-src="./logo.png" alt="">
<img data-src="./logo.png" alt="">
<img data-src="./logo.png" alt="">
    
<script>
  const imgs = document.querySelectorAll('img');
  window.addEventListener('scroll', (e) => {
      imgs.forEach( img => {
          const imgTop = img.getBoundingClientRect().top;
          if(imgTop < window.innerHeight) {
              const data_src = img.getAttribute('data-src');
              img.setAttribute('src', data_src)
          }
      })
  })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

但是以上方法有弊端，就是尽管图片已经加载完成，但依旧会不断的触发滚动事件
因此推荐使用IntersectionObserver，这是浏览器提供的函数，交叉观察，当目标元素和可是窗口出现交叉区域时，触发事件事件会触发两次，目标元素看见和看不见都会触发

IntersectionObserver

<script>
const imgs = document.querySelectorAll('img');
const callback = (entries) => {
	// 回调函数会接受一个entries参数
	entries.forEach( entry => {
		if(entry.isIntersecting) {  // 此属性进入交叉区就会为true，否则为false
			const img= entry.target;  // 获取当前进入交叉区的元素
			const data_src = img.getAttribute('data-src');
			img.setAttribute('src', data_src);
			observer.unobserve(img); // 加载完图片后对当前img元素停止观察
		}
	})
}
const observer = new IntersectionObserver(callback);

imgs.forEach(img => {
	observer.observe(img)
})
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19