vue图片懒加载—vue-lazyload

vue 496849654@qq.com 3年前 (2021-07-30) 1683次浏览 0个评论
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>

css315 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:vue图片懒加载—vue-lazyload
喜欢 (7)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到