浏览器加载页面时需要加载大量资源,图片的加载是对性能的影响因素之一,大量的图片请求对服务器是不利的。使图片懒加载(按需加载)能大幅度减少对服务器的请求,提高页面的加载速度。
懒加载的实现原理
在用户访问界面时,网页往下加载了浏览器窗口还看不到的内容,如果用户关闭网页,那么很明显加载的这部分图片是一种资源的浪费。因此我们并不需要加载所有的图片资源,只需要当浏览器界面滑动到图片的位置时才开始加载。
使用监听高度实现
首先我们需要两个数据
-
浏览器网页窗口的高度
- window.innerHeight
-
图片元素距离浏览器顶部的距离
-
getBoundingClientRect().top
-
在data-src
设置真实图片链接,src
属性可以设置为默认的占位图或空值 (data-* 属性允许我们在 HTML 元素中存储额外的信息,它不会被浏览器加载和执行)
对浏览器滚动行为进行监听,如果图片距离顶部的距离小于浏览器网页窗口的高度的高度,说明图片出现在可视范围内,将其 data-src
属性赋予给 src
开始请求图片。
以上方法即使在所有图片显示后也会对高度进行监听,因为我们无法直接移除 nodeList 的元素,当然也可以将 nodeList 转换为 Array 数组进行操作。 此方法目前只在兼容浏览器条件下考虑使用,其他情况不建议。
使用 IntersectionObserver 接口实现
IntersectionObserver 接口是浏览器提供的接口 (从属于 Intersection Observer API) ,它提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。 使用此接口主要有两个方法
-
设置观测
- IntersectionObserver.observe(targetElement);
-
取消观测
-
IntersectionObserver.unobserve(targetElement);
-
设置观测图片对图片进行监听后,被观测的图片对象和值保存在一组 IntersectionObserverEntry 对象的列表中,每个 IntersectionObserverEntry 包含了观测目标及其观测状态等信息。 通过获取到的观测状态,我们可以根据图片是被观测到(isIntersecting)控制图片的加载。
通过设置观测图片和取消观测图片,我们就可以很简单的控制图片的懒加载,而不用担心重复调用的问题。
注
使用此接口请优先考虑浏览器的兼容性。