如何用原生JS的Intersection Observer API实现图片懒加载？

本文共计339个文字，预计阅读时间需要2分钟。

目录引言Intersection Observer API 使用方法Lazy Loading 引用前端子元素在项目中的使用总结：优化渲染性能

目录

• 引言
• Intersection Observer API
• 使用方法
• Lazy Loading

引言

前一阵子在做一个项目的时候，因为每组数据都要先通过很庞大的计算，才把计算后的结果 Render 到页面上，但这样就导致如果单页查出来的数据超过大概 5 笔，就会需要等待一段有感的时间，才能看到结果出现在画面上。

后来为了解决这差劲用户体验，就使用到的标题上说到的 Lazy Loading 来处理。简单说就是，虽然要显示的数据量有 10 笔，但因为一个页面大概只能呈现 2 到 3 笔，那我就先计算那 2 到 3 笔数据然后显示就好，剩下的数据等使用者往下滚再继续显示，这样等待时间就不会太久。

然后身为一个前端工程师，再想到这个解法以后，当然就是上 Github 找一个简单又方便的组件来解决它