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

1.什么是图片懒加载

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

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

通过自定义指令

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

// 通过自定义指令 实现图片加载
export default {
    bind(el) {
        //1.将src保存后 清除el.src
        const src = el.src
        el.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)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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

3.在图片标签上 书写

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

相关知识点：https://v2.cn.vuejs.org/v2/guide/custom-directive.html