天天看点

vue图片懒加载vue-lazyload插件的使用

使用vue-lazyload的作用:

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

1.在项目下安装插件vue-lazyload

   npm install vue-lazyload --save

2.在main.js全局引用vue-lazyload

   import VueLazyload from 'vue-lazyload'

   Vue.use(VueLazyload,{

    error:'img/error.png',

    loading:'img/loading.png'

   })

3.使用vue-lazyload

   <ul>

        <li v-for="img in lists">

              <img v-lazy="img.imgUrl">

        </li>

   </ul>