vue-lazyload的使用

vue-lazyload说白了，我没下滑到那行就不显示也加载不到那些图

---

第一步：安装

cnpm i vue-lazyload -S

第二步：引入

在main.js里引入

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  preLoad: 1,//加载1秒
  error: require('./assets/logo.png'),//加载不到用这图
  loading: require('./assets/y.png'),//加载中用这个图
  attempt: 1//延迟用1秒
})

第三步：使用

---在img标签中使用

<ul class="img">
   <li v-for="(item, index) in imgList">
      <img v-lazy="item" />
   </li>
</ul>

---在背景图上使用

<ul class="bgImg"\>    
   <li v-for="(item,index) in imgList" 
       v-lazy:background-image="item">
   </li>
</ul>

---

完整代码

<template>
    <div id="app">
        <ul class="img">
            <li v-for="(item, index) in imgList">
                <img v-lazy="item" />
            </li>
        </ul>
    </div>
</template>

<script>
export default {
   data() {
      return {
         imgList: [
             require('./assets/img/1.jpg'),
                         //至
             require('./assets/img/20.jpg')]
        };
    }
};
</script>