vue 實現圖片懶載入功能
阿新 • • 發佈:2021-01-04
一個頁面圖片比較多的時候,需要對介面的圖片進行懶載入處理,今天遇到了,做個懶載入的筆記。
1,需要安裝vue的懶載入外掛。
npm install vue-lazyload --save-dev
2,需要在main.js裡面進行引用。
import VueLazyload from "vue-lazyload"; Vue.use(VueLazyload); 或者自定義 Vue.use(VueLazyload,{ preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1 })
3,修改圖片的路徑,設定為懶載入的形式,將src改成v-lazy
<img v-lazy="psdimg" class="psd" />
今天踩過的坑總結。
當遇到是v-for迴圈的時候,或者用div包裹著img的時候,需要在div上面新增v-lazy-container="{selector:'img'}"
<divv-lazy-container="{selector:'img'}"> <imgdata-src="//domain.com/img1.jpg"> <imgdata-src="//domain.com/img2.jpg"> <imgdata-src="//domain.com/img3.jpg"> </div> 或者這種: <div> v-lazy-container="{selector:'img'}" class="contentDivconstruction" v-html="content"> </div>
以及我將html裡面的圖片路徑拿到後,轉換成懶載入的時候,
一定是 data-src,而不是v-lazy,要不然在介面獲取的時候,拿到了圖片地址,但是會一直顯示不出來的。
以上就是vue 實現圖片懶載入功能的詳細內容,更多關於vue 圖片懶載入的資料請關注我們其它相關文章!