最近负责的项目渐渐的由业务型转向营销型，营销内容越来越多，图片也就多了起来。图片一多起来问题就来了，一上来几十张图片加载起来半天都过去了，咋办？凉拌--懒加载
什么是懒加载
懒加载也叫延迟加载，本质上就是按需加载。只有当图片dom即将或者已经进入用户视线范围内的时候才去加载对应的dom图片。
懒加载的处理流程
首先，所有的图片标签加入懒加载队列lazyQueue，添加监听事件，同时对mousemove、wheel事件添加监听处理。
其次，所有img标签会首先加载同一张图片(减少http请求)，这个图片一般是带有logo的默认图，或者是一张1px*1px的。
再次，首屏dom由于在视线范围之内，开始加载对应的真实图片，加载成功后将图片加入缓存成功队列cacheQueue，并从监听队列lazyQueue里面移除出去。
最后，
流程图
st=>start: Start
e=>end
op=>operation: My Operation
cond=>condition: Yes or No?
st->op->cond
cond(yes)->e
cond(no)->op以及时序图:
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!vue方案
这里我们采用的方案是自定义指令-lazy
if (isVueNext) {
Vue.directive('lazy', {
bind: addListener,
update: addListener,
componentUpdated: lazyLoadHandler,
unbind: componentWillUnmount
})
} else {
Vue.directive('lazy', {
bind: lazyLoadHandler,
update(newValue, oldValue) {
addListener(this.el, {
modifiers: this.modifiers,
arg: this.arg,
value: newValue,
oldValue: oldValue
})
},
unbind() {
componentWillUnmount(this.el)
}
})
}