本文详细解析JavaScript实现图片懒加载的三种主流方案：HTML5 loading属性、IntersectionObserver API以及vue-lazyload插件。通过对比各方案的兼容性、配置复杂度及适用场景，帮助开发者根据项目需求选择最优的图片延迟加载策略，有效提升页面加载速度与用户体验。
一、前言
图片懒加载技术旨在当图片进入浏览器可视区域时才发起加载请求，从而提升用户的浏览体验。由于并非所有用户都会浏览到页面底部的图片，预先加载全部图片会浪费网络流量。经过查阅相关资料，本文总结了三种实现方式，它们各有优劣，下文将逐一介绍。
| 方法 | 优点 | 缺点 | 推荐指数 |
|---|---|---|---|
| 设置img loading | h5的属性，没有兼容问题 | 需要已知图片高度、宽高比 | ⭐️⭐️ |
| IntersectionObserver API | 无需知道图片高度 | 低版本需引入polyfill | ⭐️⭐️⭐️ |
| vue-lazyload 自定义指令 | 无需知道图片高度 | github现存issues较多，没有解决 | ⭐️⭐️ |
二、实现方式及Demo
1. 设置img标签loading属性
loading属性支持两个值：eager表示立即加载图像（默认行为）；lazy表示延迟加载图像。在使用lazy属性时，必须为<img>标签设置高度，否则无法触发懒加载效果。
注意：此方法适用于两种场景，即图片高度已知或图片宽高比已知的情况。
已知图片高度
<style>
.img-box img {
width: 100%;
height: 700px; /*设置为图片的真实高度*/
}
</style>
<div class="img-box">
<img src="https://i.postimg.cc/GtN3Cs02/1.jpg" loading="lazy" />
<img src="https://i.postimg.cc/hGdKLGdW/2.jpg" loading="lazy" />
<img src="https://i.postimg.cc/T1SkJTbF/3.jpg" loading="lazy" />
<img src="https://i.postimg.cc/wxPFPTtb/4.jpg" loading="lazy" />
<img src="https://i.postimg.cc/FRkGF28x/5.jpg" loading="lazy" />
<img src="https://i.postimg.cc/05JH9wqq/6.jpg" loading="lazy" />
</div>
已知图片宽高比
<style>
.img-box div {
position: relative;
padding-top: 66%; /* (你的图片的高度/宽度值) */
overflow: hidden;
}
.img-box img {
position: absolute;
top:0;
right:0;
width:100%;
}
</style>
<div class="img-box">
<div>
<img src="https://i.postimg.cc/GtN3Cs02/1.jpg" loading="lazy" />
</div>
<div>
<img src="https://i.postimg.cc/hGdKLGdW/2.jpg" loading="lazy" />
</div>
<div>
<img src="https://i.postimg.cc/T1SkJTbF/3.jpg" loading="lazy" />
</div>
<div>
<img src="https://i.postimg.cc/wxPFPTtb/4.jpg" loading="lazy" />
</div>
<div>
<img src="https://i.postimg.cc/FRkGF28x/5.jpg" loading="lazy" />
</div>
<div>
<img src="https://i.postimg.cc/05JH9wqq/6.jpg" loading="lazy" />
</div>
</div>
2. 使用 IntersectionObserver
IntersectionObserver接口用于观察DOM节点是否出现在视口中，只有当DOM节点进入视口时才加载图片。img元素必须具有高度，否则图片默认被视为在视口中，导致全部加载。可以设置img的src为base64编码的白色图片，随后替换为真实图片地址。
注意：该方法无需预先知道图片高度，但存在兼容性问题，低版本浏览器需引入intersection-observer polyfill。
已知图片高度
<style>
.img-box .lazy-img {
width: 100%;
height: 600px; /*如果已知图片高度可以设置*/
}
</style>
<div class="img-box">
<img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/d48aed7c991b43d850d011f2299d852e.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
<img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/a588b152c79ac60162ecbdf82b060061.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
<img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/eacbc2cd4b6ca636077378182bdfcc88.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
<img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/751470f4b478450e8556f78cd7dd3d96.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
<img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/e4a531bee5694a4a01dee74b18bbfd8b.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
<img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/7d8f107e827a7beaa0b9d231bfa4187f.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
<img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/4f7586f6b74f2bd0b94004fcbae69856.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
<img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/863849e14e7e8903ed4b27fcbdafe8b0.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
<img class="lazy-img" data-origin="https://images.djtest.cn/pic/test/d8bb17fe9a7223f35075014ef250e2fa.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
</div>
<script>
function Observer() {
let images = document.querySelectorAll(".lazy-img");
let observer = new IntersectionObserver(entries => {
entries.forEach(item => {
if (item.isIntersecting) {
item.target.src = item.target.dataset.origin; // 开始加载图片,把data-origin的值放到src
observer.unobserve(item.target); // 停止监听已开始加载的图片
}
});
});
images.forEach(img => observer.observe(img));
}
Observer()
</script>
3. 使用vue-lazyload
在vue2环境中使用时，建议安装npm i vue-lazyload@1.3.3 -s。若使用高版本，在main.js中全局注册自定义指令后仍可能无法正常使用。在vue3环境中，可以使用npm i vue3-lazy -s。
全局注册自定义指令后，即可在页面中直接使用。
// 全局自定义指令
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1,
observer: true // 设置为true，内部使用IntersectionObserver。默认使用
})
/* 在页面中直接使用 */
<div>
<img v-lazy="https://images.djtest.cn/pic/test/d48aed7c991b43d850d011f2299d852e.jpg">
<img v-lazy="https://images.djtest.cn/pic/test/a588b152c79ac60162ecbdf82b060061.jpg">
<img v-lazy="https://images.djtest.cn/pic/test/eacbc2cd4b6ca636077378182bdfcc88.jpg">
<img v-lazy="https://images.djtest.cn/pic/test/751470f4b478450e8556f78cd7dd3d96.jpg">
</div>
以上就是JavaScript实现图片懒加载的三种方案详解的详细内容，更多关于JavaScript图片懒加载的资料请关注本站其它相关文章！