圖片懶載入

在實際的專案開發中，我們通常會遇見這樣的場景：一個頁面有很多圖片，而首屏出現的圖片大概就一兩張，那麼我們還要一次性把所有圖片都加載出來嗎？顯然這是愚蠢的，不僅影響頁面渲染速度，還浪費頻寬。這也就是們通常所說的首屏載入，技術上現實其中要用的技術就是圖片懶載入--到可視區域再載入。

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="">不起作用