vue2实现图片懒加载
Vue2 图片懒加载实现方法
使用 Intersection Observer API
Intersection Observer API 是浏览器原生支持的懒加载方案，性能较好且无需额外依赖。
// 自定义指令
Vue.directive('lazy', {
inserted: (el, binding) => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
el.src = binding.value
observer.unobserve(el)
}
})
})
observer.observe(el)
}
})<!-- 使用方式 -->
<img v-lazy="imageUrl" alt="description">使用第三方库 vue-lazyload
vue-lazyload 是专为 Vue 设计的懒加载库，提供更多功能和配置选项。
安装：
npm install vue-lazyload配置：
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'error.png',
loading: 'loading.gif',
attempt: 3
})使用：
<img v-lazy="imageUrl" alt="description">传统滚动监听方案
适用于需要兼容老版本浏览器的场景。
Vue.directive('lazy', {
inserted: (el, binding) => {
function checkVisible() {
const rect = el.getBoundingClientRect()
return (
rect.top <= window.innerHeight &&
rect.bottom >= 0
)
}
function loadImage() {
if (checkVisible()) {
el.src = binding.value
window.removeEventListener('scroll', loadImage)
}
}
window.addEventListener('scroll', loadImage)
loadImage()
}
})注意事项
- 图片需要设置默认占位图（loading 状态）
- 考虑图片加载失败时的备用方案
- 移动端需要添加 touchmove 事件监听
- 大量图片时注意性能优化，可配合节流函数使用
- 服务器端渲染(SSR)需要特殊处理
性能优化建议
- 使用低质量图片占位符(LQIP)技术
- 图片尺寸适配不同屏幕分辨率
- 优先加载首屏可见区域图片
- 图片预加载相邻区域内容
