在vue中使用图片懒加载详细指南
,
分享给大家。具体如下:说明
当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点。
使用方式
使用vue的 vue-lazyload 插件
插件地址:
案例
Installation 安装方式
npm
CDN
用法
main.js 在入口文件
Vue.use(VueLazyload)
// 或者添加VueLazyload 选项
Vue.use(VueLazyload,{
preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1
})
new Vue({
el: 'body',components: {
App
}
})
在入口文件添加后,在组件任何地方都可以直接使用把 img 里的:src -> v-lazy