vue 實現(xiàn)圖片懶加載功能
更新時間：2020年12月31日 11:59:18 作者：熊大的小跟班
這篇文章主要介紹了vue 實現(xiàn)圖片懶加載功能的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
一個頁面圖片比較多的時候，需要對界面的圖片進行懶加載處理，今天遇到了，做個懶加載的筆記。
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循環(huán)的時候，或者用div包裹著img的時候，需要在div上面添加v-lazy-container="{ selector: 'img' }"
<div v-lazy-container="{ selector: 'img' }">
<img data-src="http://domain.com/img1.jpg">
<img data-src="http://domain.com/img2.jpg">
<img data-src="http://domain.com/img3.jpg">
</div>
或者這種：
<div>
v-lazy-container="{ selector: 'img' }"
class="contentDiv construction"
v-html="content">
</div>
以及我將html里面的圖片路徑拿到后，轉換成懶加載的時候，
一定是 data-src，而不是v-lazy，要不然在接口獲取的時候，拿到了圖片地址，但是會一直顯示不出來的。
以上就是vue 實現(xiàn)圖片懶加載功能的詳細內容，更多關于vue 圖片懶加載的資料請關注腳本之家其它相關文章！
相關文章
使用Vue.set()方法實現(xiàn)響應式修改數(shù)組數(shù)據(jù)步驟
今天小編就為大家分享一篇使用Vue.set()方法實現(xiàn)響應式修改數(shù)組數(shù)據(jù)步驟，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue3的基本使用方法,結合實例形式詳細分析了vue3功能、組件、生命周期、TypeScript結合運用等相關概念與使用方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了?vue利用openlayers加載天地圖和高德地圖，下文章主要由兩部分完成openlayers加載天地圖和加載高德地圖，下面來看看詳細內容吧,需要的朋友可以參考一下，希望對大家有所幫助2021-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端原生小球滑塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue2+springsecurity權限系統(tǒng)的實現(xiàn)
本文主要介紹了vue2+springsecurity權限系統(tǒng)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
vue中v-for和v-if不能在同一個標簽使用的最新解決方案
這篇文章主要介紹了vue中v-for和v-if不能在同一個標簽的最新解決方案,這里描述了兩種解決方案，結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
有時候我們希望在指定的位置輸出我們的子元素,這時候具名插槽就排上了用場,這篇文章主要給大家介紹了關于Vue中插槽Slot基本使用與具名插槽的相關資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue 原生實現(xiàn)右鍵菜單組件功能，本文給大家擴展知識點vue點擊菜單以外區(qū)域，隱藏菜單操作，通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue3一個元素如何綁定兩個或多個事件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vue中的slots/scoped slots,本文實例代碼相結合的形式給大家介紹了slots的工作原理，需要的朋友可以參考下2018-04-04