Skip to main content

LazyLoad

· One min read
marvin-season
marvin-season
Maintainer of Docusaurus

参考资料​

https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Lazy_loading

Intersection Observer API​

  • row: 10000
  • startIndex: 7
  • end: 17
  • acceleration: 4
  • buffer: 1
  • rows: [{"id":6},{"id":7},{"id":8},{"id":9},{"id":10},{"id":11},{"id":12},{"id":13},{"id":14},{"id":15},{"id":16},{"id":17}]
6
7
8
9
10
11
12
13
14
15
16
17

How​

借助 IntersectionObserver API, 监听将要进入视口内的dom，当该 dom 出现在视口中时，加载更多！

Pseudo​

const observer = new IntersectionObserver((entries, observer) => {
    if('discover'){
        // load more
    }
})

observer.observe('dom' as HTMLElement)

Images and iframes​

示例图片

以图片为例，打开控制台，筛选网络中的图片，然后滚动上述视口，当图片靠近视口区域时，可以看到图片资源加载

loading="lazy"

<img loading="lazy" src="image.jpg" alt="..." />
<iframe loading="lazy" src="video-player.html" title="..."></iframe>