Lazyload 懒加载

引入

通过以下方式来全局注册组件,更多注册方式请参考。

Vue 指令,使用前需要对指令进行注册。

  1. <img v-for="img in imageList" v-lazy="img" />

背景图懒加载

和图片懒加载不同,背景图懒加载需要使用 ,值设置为背景图片的地址,需要注意的是必须声明容器高度。

  1. <div v-for="img in imageList" v-lazy:background-image="img" />

将需要懒加载的组件放在 lazy-component 标签中,即可实现组件懒加载。

  1. <lazy-component>

Options

由于 Lazyload 组件在注册时可以传入一些配置项,所以我们不会自动注册 Lazyload 组件,需要手动进行注册: