vue实现懒加载图片
vue实现懒加载图片的方法
懒加载图片可以提升页面性能，减少不必要的资源加载。以下是几种常见的实现方式：
使用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="lazy image">使用第三方库
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="lazy image">原生实现方案
对于需要兼容旧浏览器的项目，可以使用scroll事件监听实现。
Vue.directive('lazy', {
inserted: (el, binding) => {
function checkVisible() {
const rect = el.getBoundingClientRect()
return (
rect.top <= window.innerHeight &&
rect.bottom >= 0 &&
rect.left <= window.innerWidth &&
rect.right >= 0
)
}
function loadImage() {
if (checkVisible()) {
el.src = binding.value
window.removeEventListener('scroll', loadImage)
}
}
window.addEventListener('scroll', loadImage)
loadImage()
}
})注意事项
- 为懒加载图片设置合适的高度和宽度，避免页面布局抖动
- 使用占位图提升用户体验
- 考虑添加加载失败时的备用方案
- 移动端需要特别处理快速滑动场景
- 大量图片时考虑使用虚拟滚动技术配合懒加载
性能优化建议
- 对Intersection Observer设置适当的rootMargin
- 滚动事件监听需要节流处理
- 图片加载完成前显示低质量预览图(LQIP)
- 考虑使用WebP等现代图片格式进一步优化
