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="图片资源路径" />
相关知识点
:https://v2.cn.vuejs.org/v2/guide/custom-directive.html