vue中如何使用图片懒加载vue-lazyload插件

这篇文章给大家分享的是有关vue中如何使用图片懒加载vue-lazyload插件的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联是专业的舒兰网站建设公司，舒兰接单;提供成都网站制作、网站设计、外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行舒兰网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

具体如下：

说明

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

使用方式

使用vue的 vue-lazyload 插件

插件地址:https://www.npmjs.com/package/vue-lazyload

案例

demo： 懒加载案例demo

Installation 安装方式

npm

$ npm i vue-lazyload -D

cdn

CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js

用法

main.js 在入口文件

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload' //引入这个懒加载插件

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