vue图片懒加载—vue-lazyload

Vue图片src绑定

<li v-for="(item,index) in itemdata" :key="index">
     <div class="z-feed-img">
           <a :href="item.click_url">
               <img width="180px" height="180px" :src="item.pict_url" alt="">
           </a>
     </div>
</li>

由于循环出来的图片比较多，会导致页面比较卡，所以考虑用vue-lazyload插件解决

1.安装

npm install vue-lazyload --save-dev

2.引入

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: require('./assets/error.png'),
  loading: require('./assets/loading.gif') , //这里要注意一定要用require
  attempt: 1
})

new Vue({
  el: '#app',
  router,
  VueLazyload,
  components: { App },
  template: ''
})

3.使用

<li v-for="(item,index) in itemdata" :key="index">
     <div class="z-feed-img">
           <a :href="item.click_url">
               <img alt=""   width="180px" height="180px"  v-lazy="item.pict_url"  />
           </a>
     </div>
</li>