本文探讨了两种图片懒加载技术：基于事件监听的滚动触发加载和浏览器提供的IntersectionObserver接口。事件监听可能导致性能问题，而IntersectionObserver能更智能地加载图片，但存在兼容性挑战。优化图片加载对于提升网页性能和用户体验至关重要。
事件监听
- 监听scroll这个事件，鼠标滚动就触发
- window.innerHeight是窗口显示区的高度
- getBoundingClientRect().top获取图片到视口上方的高度
- 图片若未能显示到屏幕上:说明getBoundingClientRect().top大于window.innerHeight
- data-src：不知道要在哪里下载图片。等到真正需要加载图片的时候，获取这个属性值，赋值给imgae的src
缺点：消耗资源，一直在触发监听事件，会造成性能问题
浏览器提供的构造函数IntersectionObserver
观察元素是否可见(isIntersecting)，如果可见，就加载图片。勿忘unobserve，避免多次加载。
缺点：有兼容性问题
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
