Vue项目实现 图片懒加载

 vue-lazyload 库的GitHub地址：https://github.com/hilongjw/vue-lazyload#requirements

图片懒加载：当图片出现在可见屏幕时，再加载这张图片 

•  安装插件

npm install vue-lazyload -S

• 在文件main.js中：

//1)引入插件
import VueLazyload from 'vue-lazyload'

//2)使用懒加载的插件
Vue.use(VueLazyload,{
      loading: require('图片路径'), //在js中通过require来引入一张图片，作为loading过渡图片
})

 

 在模板中使用，img的src属性改为v-lazy

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>