Lazyload 懒加载
引入
通过以下方式来全局注册组件,更多注册方式请参考。
是 Vue
指令,使用前需要对指令进行注册。
<img v-for="img in imageList" v-lazy="img" />
背景图懒加载
和图片懒加载不同,背景图懒加载需要使用 ,值设置为背景图片的地址,需要注意的是必须声明容器高度。
<div v-for="img in imageList" v-lazy:background-image="img" />
将需要懒加载的组件放在 lazy-component
标签中,即可实现组件懒加载。
<lazy-component>
Options
由于 Lazyload 组件在注册时可以传入一些配置项,所以我们不会自动注册 Lazyload 组件,需要手动进行注册: