在项目中如果有大量的图片需要加载的时候，就可以考虑使用懒加载了，懒加载其实就是监听浏览器的滚动，当滚动到一定的范围的时候就将图片的真实路径赋给src,然后取消监听。
实现的方法也比较简单，可以通过懒加载的插件实现，也可以手写，手写通过vue自定义指令来实现，一般情况自定义指令用的也不多，比较vue自带的就够用了，大型复杂的项目的可能用的多。
1、vue的自定义指令，顾名思义就是自己定义一个指令类似于v-for、v-if这种，实现指定的功能，使用和原有指令一样，又分为全局指令，局部指令。
全局指令
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部指令
data(){
return {
}
}
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
},
methods:{
}
2、vue的自定义指令有三个钩子函数（类似于生命周期）bind（只调用一次，指令第一次绑定到元素时调用，初始化调用）、inserted（被绑定元素插入父节点时调用）、update（所在组件的 VNode（虚拟dom） 更新时调用）、componentUpdated（指令所在组件的 VNode 及其子 VNode 全部更新后调用）、
unbind（只调用一次，指令与元素解绑时调用。）
3、钩子函数会被传入以下参数：el（当前dom元素）、binding（一个对象，包含绑定的值value和name等）
4、实现懒加载，先注册一个局部指令v-lazy，在inserted钩子函数中监听滚动，当当前元素的offsetTop小于屏幕的高度加上滚动的高度时将真实的图片路径给src>
directives:{
lazy:{
inserted(el,binding){
function fun(){
let H=window.innerHeight;
let st=document.body.scrollTop||document.documentElement.scrollTop;
if(el.offsetTop<=H+st+200){
el.src=binding.value;
window.removeEventListener("scroll",fun);//解决资源再次请求
}
}
fun();
window.addEventListener("scroll",fun)
}
}
},
