vue-lazyload 源码解析

JavaScript08

vue-lazyload 源码解析,第1张

/src/lazy.js

定义变量接收实例化参数。

lazy.js 默认导出一个函数,该函数返回一个 Lazy 类,形成闭包,保持对 Vue 的引用。

判断是否支持Webp图片

/src/listener.js

定义变量接收实例化参数。

filter 方法将配置的 filter 对象中的方法执行,接收两个参数,一个为 ReactiveListener 实例,一个为 options 参数对象。

initState 方法给元素添加 data-set 属性,值为图片地址 src,并且定义了图片状态对象 state 。在 Lazy 中已经根据像素比选择了最适配屏幕的图片,顾这里不需要考虑 srcset 属性。另外,我们自定义指令是 v-lazy,到目前为止,还没有给图片的 src 属性赋值。

render 方法,是在 Lazy 中实例化 ReactiveListener 时传递过来的参数。

回过头再来结合 lazy.js 中的 lazyLoadHandler 方法与 ReactiveListener 暴露的方法来看。

/src/lazy-container.js

LazyContainer 的核心是 container 下的选择器selector(默认 img 标签)遍历后调用 lazy 的 add 方法进行绑定,自定义指令 v-lazyload-container。

/src/lazy-component.js

上述实现元素绑定主要是通过自定义指令 v-lazy , v-lazy-container 。那么 LazyComponent 则是通过注册的 lazy-component 组件,完成绑定,默认渲染成为 div 标签,作为 img 的容器。

/src/lazy-image.js

通 LazyComponent 组件,只不过 LazyImage 注册的 lazy-image 组件,渲染成的是 img 标签,多了 src 属性。

通过自定义指令 v-lazy 将设置背景图的元素或者 img元素,通过 _addListenerTarget 方法收集与数组 TargetQueue 中,并遍历触发懒加载的方法, addEventListener 绑定在该元素上,触发的事件为 lazyLoadHandler ;

在需要懒加载的元素上设置属性 data-src ,这是期望的图片地址(filter 配置项可以预先过滤赋值),元素上自定义 lazyLoad 表示图片状态(状态变更后,adapter 中触发回调);

ListenerQueue 数组中收集的是 ReactiveListener 类的实例,主要是用于懒加载不同状态下的图片加载,loading - loaded - error;

当触发 EventListener 了,执行 lazyLoadHandler 方法,根据算法,进入 viewport 后, ReactiveListener 元素如果与触发元素匹配,则进行图片的加载及渲染。

根据你的描述,应该是你代码写的顺序有问题。首先,你图片应该是ajax获取路径之后动态添加到页面上的吧,如果是这样,那么你可能就是在ajax返回图片路径并添加到页面之前执行了$("img.lazy").lazyload()这句话。图片都没有加载到,肯定失效了。

所以,你应该在ajax返回图片路径,并添加到页面上之后,在执行懒加载初始化的语句。希望能帮到你。【我只是猜测】