vue项目中，单页图片过多，使用懒加载

最近做项目，一页图片很多，加载的时候效果很差。

通过学习借鉴其他大神的方法，使用了插件vue-lazyload，使用这个插件，界面更美观了，加载的效果好起来。

安装

npm i vue-lazyload --save

在main.js中加入下面代码

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

// Vue.use(VueLazyload) // 直接使用

Vue.use(VueLazyload, { // 添加自定义选项

  preLoad: 1.3,

  error: '../static/icon/error.png', // 加载错误时候的图片

  loading: '../static/icon/loading.png', // 加载中的图片

  attempt: 7,

  listenEvents: [ 'scroll' ],

})

我在项目中的使用：

<li v-for="(items,index) in imgFiles" :key="index" @click="showImg(items)">

  <a href="javascript:void(0)" v-if="items.type === 'jpg' || items.type === 'jpeg' || items.type === 'png' || items.type === 'JPG'">

    <img v-lazy="items.src" alt="">

    <p>{{items.name}}</p>

  </a>

</li>

巴特西

vue项目中，单页图片过多，使用懒加载

最新文章

热门文章