图片懒加载的三种实现 - 翁先森的博客

三种测试全是用于以下的 html 代码

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>图片懒加载</title>
8
  </head>
9

10
  <body>
11
    <div class="container" id="container">
12
      *[Image missing: u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500]*
13
      *[Image missing: u=3156137851,1307209439&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500]*
14
      *[Image missing: u=1474625213,1040099858&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500]*
15
      *[Image missing: u=3973060071,1632243021&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500]*
16
      *[Image missing: u=1428075551,3971081578&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500]*
17
      *[Image missing: u=3573056321,2239143646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500]*
18
      *[Image missing: u=1003272215,1878948666&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800]*
19
      *[Image missing: u=345670089,3951600800&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500]*
20
      *[Image missing: u=617579813,2960860841&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800]*
21
      *[Image missing: u=45841977,3664621913&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500]*
22
      *[Image missing: u=1273517628,1100314156&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281]*
23
      *[Image missing: u=861863691,2776527252&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500]*
24
      *[Image missing: u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500]*
25
      *[Image missing: u=3151377466,4172354467&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800]*
26
    </div>
27
    <style>
28
      .container {
29
        height: 100%;
30
        overflow: auto;
31
        width: 500px;
32
      }
33

34
      .container img {
35
        width: 100%;
36
        display: block;
37
        height: 300px;
38
      }
39
    </style>
40
    <script type="module" src="./index.js"></script>
41
  </body>
42
</html>

使用视口高度和 offsetHeight，scrollTop#

1
import throttle from "../throttle/throttle.js";
2

3
let imgs = document.querySelectorAll("img");
4

5
let length = imgs.length;
6

7
let count = 0;
8

9
function lazyLoadImg() {
10
  let viewH = document.documentElement.clientHeight;
11
  const scrollHeight = document.documentElement.scrollTop;
12

13
  for (let i = count; i < length; i++) {
14
    const dom = imgs[i];
15

16
    const domOffsetTop = dom.offsetTop;
17

18
    if (domOffsetTop <= viewH + scrollHeight) {
19
      const imgSrc = dom.getAttribute("data-src");
20

21
      dom.setAttribute("src", imgSrc);
22
      count++;
23
    }
24
  }
25
}
26
lazyLoadImg();
27

28
document.addEventListener("scroll", throttle(lazyLoadImg, 200));

getBoundingClientRect#

1
import throttle from "../throttle/throttle.js";
2

3
let imgs = document.querySelectorAll("img");
4

5
let length = imgs.length;
6

7
let count = 0;
8

9
function lazyLoadImg() {
10
  let viewH = document.documentElement.clientHeight;
11
  for (let i = count; i < length; i++) {
12
    const dom = imgs[i];
13

14
    const { top } = dom.getBoundingClientRect();
15

16
    if (top <= viewH) {
17
      const imgSrc = dom.getAttribute("data-src");
18

19
      dom.setAttribute("src", imgSrc);
20
      count++;
21
    }
22
  }
23
}
24
lazyLoadImg();
25

26
document.addEventListener("scroll", throttle(lazyLoadImg, 200));

IntersectionObserver#

1
let imgs = document.querySelectorAll("img");
2

3
let length = imgs.length;
4

5
const observer = new IntersectionObserver((changes) => {
6
  changes.forEach((change) => {
7
    const { isIntersecting, target } = change;
8

9
    if (isIntersecting) {
10
      console.log("进来了");
11
      const dataSrc = target.getAttribute("data-src");
12

13
      target.setAttribute("src", dataSrc);
14

15
      observer.unobserve(target);
16
    }
17
  });
18
});
19

20
Array.from(imgs).forEach((dom) => {
21
  observer.observe(dom);
22
});