Skip to main content

图片懒加载

· 8 min read
hec9527

虽然浏览器加载图片、脚本、字体等资源的时候本身就是异步加载的,但是页面上的所有图片默认都是在页面加载的时候就开始请求的,不仅浪费带宽而且会增加页面的首屏加载时间,用户体验较差

浏览器原生懒加载

👉🏻 查看懒加载效果

现代浏览器中,<img>标签原生就支持懒加载,在<img>标签中添加loading属性,其允许的值为eager|lazy,默认值为eager,浏览器会在页面加载时立即加载图像,不论它是不是在视口范围内。如果设置为lazy,值到图片滚动到与视口一定距离才会开始加载图片,这个距离由浏览器来自定

根据 caniuse 的数据统计,截止目前原生的loading属性支持率由91%,生产环境可能需要polyfill

info

如果设置了loading='lazy'依然没有延迟加载图片可能是因为以下原因:

  1. 高度不够,图片延迟加载时距离视口的距离这个是由浏览器来控制的,可以增加页面高度,或者多添加点图片,也可以给图片设置一个高度
  2. 没有启用javaScript

IntersectionObserver

浏览器原生图片懒加载确实很好用,但是就目前而言兼容性还有待提高,生产环境还不能放心使用,那么有其他图片懒加载的方式么,当然有那就是 IntersectionObserver,在聊用法之前先看看兼容性

整体兼容性相对原生的懒加载要好不少,抛开移动端,主流的桌面端基本都能支持,下面我们来看看他的用法

用法

IntersectionObserver 是一个构造函数,可以构造一个观察者,构造函数接受一个回调函数,当观察者所观察的元素出现在视口的时候,调用回调函数,回调函数接受一个参数 entries 来接收所有被观察的元素。IntersectionObserver 构造函数返回的观察者实例有四个实例方法

  1. observe 添加一个监听的目标元素
  2. unobserve 停止监听目标元素
  3. disconnect 终止对所有目标元素可见性变化的观察
  4. takeRecords 返回所有被观察目标的数据

基本实现

页面 html 大致内容

<div>
<!-- poem 占位,将图片挤到页面外 -->
</div>
<img data-src='path/img/1.jpg' height="700px" />
<div>
<!-- poem 占位,将图片挤到页面外 -->
</div>
<img data-src='path/img/2.jpg' height="700px" />

实现懒加载脚本

const imgs = new Set(document.querySelectorAll('img[data-src]')); // 只给有data-src的img元素添加懒加载
const observer = new IntersectionObserver(observerCallback); // 创建观察者实例,并传入回调方法

imgs.forEach(img => observer.observe(img)); // 观察所有需要懒加载的图片

// 当任何一个被观察的元素出现在视口的时候都会调用该回调
function observerCallback(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
el.src = el.dataset.src;
el.onload = ()=>{
imgs.delete(el); // 图片加载完成后从懒加载列表移除,减少后续回调循环次数
if (imgs.size == 0) { // 所有懒加载图片加载完成后,停止观察
observer.disconnect()
}
}
}
})
}

👉🏻 查看懒加载效果

监听页面滚动实现

实现方式

通过监听页面滚动实现图片懒加载原理和 intersectionObserver 类似,都是通过监听元素是否滚动到视口范围来实现的,但是兼容性会更好,可以作为兜底实现。

实现方式,页面中的图片都不设置 src,将图片地址存放到 data-src自定义属性上,然后监听页面滚动,页面滚动的时候判断图片距离视口的距离,当图片距离视口一定距离(通常是 window.innerHeight + buffer,因为图片加载需要一定时间,buffer用来尽量保证图片进入视口时已经加载完成),将图片的地址替换为自定义属性上的地址。最后当页面中懒加载图片完全加载后,移除监听的滚动事件。

实现案例

实现效果 👉🏻 在线案例,请在devTool中模拟手机设备查看

页面 html 大致内容

<div>
<!-- poem 占位,将图片挤到页面外 -->
</div>
<img data-src='path/img/1.jpg' height="700px" />
<div>
<!-- poem 占位,将图片挤到页面外 -->
</div>
<img data-src='path/img/2.jpg' height="700px" />

js 脚本实现

const imgs = new Set(document.querySelectorAll('img[data-src]')); // 转为set方便便利,移除已加载图片
const buffer = 120; // 滚动到视口之前就开始加载,buffer距离可以根据需要设置

function handleScroll() {
imgs.forEach(img => {
if (img.getBoundingClientRect().top <= window.innerHeight + buffer) {
img.src = img.dataset.src;
img.onload = () => {
imgs.delete(img);
if (imgs.size === 0) {
console.log('remove event');
window.removeEventListener("scroll", handleScroll);
}
}
}
})
}
window.addEventListener("scroll", handleScroll)

以上实现是一个最基础的实现方式,具体使用时还需要考虑以下几点

  1. handleScroll函数节流,避免执行次数过多导致页面卡顿
  2. handleScroll应该调过加载中的函数,避免重复请求图片资源
  3. 对于出现在首屏内的图片,可以不设置data-src属性,或者在DOMContentLoaded时先执行一遍 handleScroll

总结

在浏览器原生支持懒加载的情况下,尽量使用原生 loading 属性,使用起来相对简单,同时浏览器可以自己去控制加载时机。IntersectionObserve 和 监听滚动这两种方式,我觉得 IntersectionObserve更好,回调函数的触发频率不高,只在元素出现在视口时才会触发,不需要自己添加节流,也不用考虑首屏懒加载问题。当然了它也有一个很大的问题,那就是不能设置 buffer 不能在图片即将出现在视口时提前加载图片。具体使用那种方式还得看使用场景和目标环境的兼容性。