乐趣区

原生实现img-lazyLoad:图片延迟加载(基于intersection Observer)

intersection Observer 简介
点击查阅 MDN 关于此 api 的使用说明
这个 api 是用来检测 dom 元素交集的,常见的应用场景之一就是本文提到的对图片进行懒加载,即:拖动窗口滚动条,到达当前这个图片的时候,再去读取挂在自定义属性(比如:’data-src’)上的 url 地址,之后将该 url 地址写到到 src 属性上去进行下载、展示这个图片。因此,我们关注的重点是:该图片是否滚动到了当前窗口的可视区域。通常解决的办法是,监听窗口元素的 scroll 事件,在事件处理程序中对图片的位置做判断。然而,这么做的一个弊端是,因为 js 是单线程的,而 scroll 事件出现的又很密集,每次都去响应 scroll 事件可能会影响用户体验。
intersection Observer 的诞生就是为了处理这种类似于上文提到的元素交集检测。它会观察我们的目标元素,当目标元素出现在 root 元素的可视区域时便会触发一个(我们事先放进去的)回调函数,于是我们可以在回调函数里面处理业务逻辑。
这里出现了两个小概念,对应于本文实现的图片懒加载功能来说:

目标元素:指的就是那些我们需要懒加载的图片
root 元素指的就是目标元素的父窗口,比如这里的图片的父元素容器

利用 intersection Observer 实现懒加载
点此查看该案例的 stackblitz
查看该案例:

在 index.html 页面内有一个 scrollContainer,在里面首先是放了几段文字,之后是 5 个 img 元素,并将 img 的 url 地址写在了自定义属性 ’data-src’ 内。
在 css 文件内定义了一些样式,其中,move-in 是在我们对图片真正进行加载时才会添加的动画效果。

现在,无论我们怎么拖动滚动条都无法看见图片,因为我们仅仅是把 img 的 url 写在了自定义属性中而不是 src 属性中。接下来,我们需要利用 intersection Observer 对这些暂时看不见的图片元素进行观察,当确认他们滚动到了窗体的可视区域时,我们在回调函数中对其进行加载。
创建一个 observer:
const observer = new IntersectionObserver(callback,option)
option 配置 root 元素和回调函数触发机制,这里我们将 scrollContainer 这个 div 设为 root。callback 就是当检测到目标元素与 root 元素交集时会调用的函数,形如:
(entrances, observer)=>{
// entrances 是个数组对象,包含了所有的目标元素,通常我们会遍历它们,并判断每一个单独的个体是否与 root 元素产生了交集,如果是,那么我们就会执行一些逻辑
}
连接目标元素
刚才我们创建了 observer,并且设置了它的 root 元素,现在需要告诉这个 observer,我们需要观察哪些目标元素与此 root 元素的交集。通过 observer.observe(target) 进行链接
最终的代码
const imgs = document.querySelectorAll(‘img’) // 获取所有待观察的目标元素
var options = {
root: document.querySelector(‘.scrollContainer’),
rootMargin: ‘0px’,
threshold: 1.0
}
function lazyLoad(target) {
const observer = new IntersectionObserver((entrances, observer) => {
entrances.forEach(entrance => {
if (entrance.isIntersecting) {
const img = entrance.target;
const src = img.getAttribute(‘data-src’);
img.setAttribute(‘src’, src)
img.classList.add(‘move-in’)
observer.disconnect()
}

})
}, options);
observer.observe(target)
}

imgs.forEach(lazyLoad)

退出移动版