vue 踩坑笔记 五.图片懒加载

1.下载插件

npm install vue-lazyload --save

2.全局配置

在main.js中进行配置

import VueLazyload from ‘vue-lazyload’
Vue.use(VueLazyload, {
preLoad: 1.3,
loading: require(‘图片加载时的占位图,最好放在src/assets下’),
attempt: 1
})

3.组件中使用

使用v-lazy代替：src

<ul>
  <li v-for="(item,index) in demoArr" :key = "index">
  	<img  v-lazy = "item"/>
  </li>
</ul>

4.天坑

1.循环一定不能放图片上！！！！

错误示例
错误
错误
错误

<img v-for="(item,index) in demoArr" :key = "index"  v-lazy = "item" />

这样写会完全没有懒加载的效果

2.图片显示有问题时注意require

 demoArr :[
        require("@/assets/images/1.jpg"),
        require("@/assets/images/2.jpg"),
        require("@/assets/images/3.jpg"),
        require("@/assets/images/4.jpg"),
        require("@/assets/images/5.jpg"),
        require("@/assets/images/6.jpg"),
        require("@/assets/images/7.jpg"),
        require("@/assets/images/8.jpg"),
        require("@/assets/images/9.jpg"),
        require("@/assets/images/10.jpg"),
        require("@/assets/images/11.jpg"),
        require("@/assets/images/12.jpg"),
        require("@/assets/images/13.jpg"),
        require("@/assets/images/14.jpg"),
      ]

3.占位图片加载有问题时

最好将占位图放在src/assets目录下
使用下面的方式对懒加载进行全局配置

Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: require('@/assets/images/loading.jpg'),
  attempt: 1
})