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,修改圖片的路徑，設(shè)置為懶加載的形式，將src改成v-lazy
<img v-lazy="psdimg" class="psd" />
今天踩過的坑總結(jié)。
當遇到是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里面的圖片路徑拿到后，轉(zhuǎn)換成懶加載的時候，
一定是 data-src，而不是v-lazy，要不然在接口獲取的時候，拿到了圖片地址，但是會一直顯示不出來的。
以上就是vue 實現(xiàn)圖片懶加載功能的詳細內(nèi)容，更多關(guān)于vue 圖片懶加載的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文主要介紹了vue?el-pagination分頁查詢封裝的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要介紹了vue時間選擇控件的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue為什么要謹慎使用$attrs與$listeners，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
關(guān)于引入vue.js 文件的知識點總結(jié)
在本篇文章里小編給大家分享的是關(guān)于引入vue.js 文件的知識點總結(jié)，有需要的朋友們可以參考學(xué)習(xí)下。2020-01-01
這篇文章主要介紹了vue使用file-saver插件保存各種格式文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue父組件如何獲取子組件的值,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了Vue 中的受控與非受控組件的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家介紹了React DOM diff 對比Vue DOM diff 區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vue v2.4中新增的$attrs及$listeners屬性使用教程
這篇文章主要給大家介紹了關(guān)于Vue v2.4中新增的$attrs及$listeners屬性的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要為大家詳細介紹了Vue使用Echarts實現(xiàn)排行榜效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03