浅谈vue中使用图片懒加载vue-lazyload插件详细指南

在vue中使用图片懒加载详细指南

，

分享给大家。具体如下：

说明

当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。

使用方式

使用vue的 vue-lazyload 插件

插件地址:

案例

demo：

Installation 安装方式

npm

rush:bash;"> $ npm i vue-lazyload -D

CDN

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