vue 图片懒加载 vue-lazyload

图片懒加载

在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。

vue中经常使用vue-lazyload

npm install vue-lazyload --save-dev

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

      <div class="box" v-for="(list,index) in vote_list" :key="list.id">
        <img v-lazy="vote_list[index].img" alt="">
      </div>

把图片src 替换成 v-lazy    

注意  对于<img src="http://ordfm6aah.bkt.clouddn.com/shop/10.jpeg" alt="">替换成<img v-lazy="http://ordfm6aah.bkt.clouddn.com/shop/10.jpeg" alt="">不起作用

 

转载于:https://www.cnblogs.com/zjx304/p/9870835.html