vue-lazyload 图片懒加载

简述：

1)vue-lazyload是通过指令的方式实现的，定义的指令是v-lazy指令;

2)指令被bind时会创建一个listener，并将其添加到listener queue里面， 并且搜索target dom节点，为其注册dom事件(如scroll事件);

3)上面的dom事件回调中，会遍历 listener queue里的listener，判断此listener绑定的dom是否处于页面中perload的位置，如果处于则加载异步加载当前图片的资源;

4)同时listener会在当前图片加载的过程的loading，loaded，error三种状态触发当前dom渲染的函数，分别渲染三种状态下dom的内容;

二、源码解析：

1、在组件install安装时，调用LazyClass返回了一个class对象，然后创建了一个class实例。

2、其核心是lazyLoadHandler()函数，是经过节流函数处理的图片加载的入口函数。


 

3、主要操作：找到对应的target(用于注册dom事件的dom节点;比如：页面滚动的dom节点)，为其注册dom事件;为当前dom创建Listenr并添加到listener queue中。最后用lazyLoadHandler()函数，加载图片。

4、当满足条件，调用load()函数异步加载图片。

（编辑：吉安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!