如何在vue中实现图片懒加载

加载"/>

如何在vue中实现图片懒加载

1.什么是图片懒加载

概念当图片还未出现在浏览器的可视区，图片并不加载src所引入的图片资源。只有当图片出现在可视区时，才加载图片资源。
好处：当页面中需要许多图片进行展示。但是，在我们不可视区的图片我们可以进行图片懒加载，加快可视区的图片显示，防止出现可视区过多图片不显示的效果。有利于提示用户的体验度。

2.在vue2中实现图片懒加载

通过自定义指令

1.在src下新建directives->lazy.js文件。并在lazy.js下书写以下代码

// 通过自定义指令 实现图片加载
export default {bind(el) {//1.将src保存后 清除el.srcconst src = el.srcel.src = ''const observe = new IntersectionObserver((entries) => {console.log('执行了');//2.出现在可视区 赋予src 加载图片if (entries[0].isIntersecting) {console.log(123);el.src = src//关闭 observe观察 防止多次执行observe.unobserve(el)}})observe.observe(el)}
}

2.在main.js中 书写以下代码

//自定义指令 实现 图片懒加载 引入 全局注册
import lazy from '@/directives/lazy'
Vue.directive('lazy', lazy)

3.在图片标签上 书写

<img v-lazy src="图片资源路径" />

相关知识点：.html