vue通過vue-lazyload實(shí)現(xiàn)圖片懶加載的代碼詳解
更新時(shí)間：2024年02月23日 10:20:37 作者：小安吖~
這篇文章主要給大家介紹了vue通過vue-lazyload實(shí)現(xiàn)圖片懶加載,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
一、安裝vue-lazyload
1）vue中安裝：
npm install vue-lazyload --save-dev
2）vue-cli中安裝：
npm install vue-lazyload -D
3）在HTML中安裝：
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script> <script> Vue.use(VueLazyload) ... </script>
二、在main.js中進(jìn)行引用
// 引入插件
import VueLazyload from 'vue-lazyload'
// 注冊(cè)插件
Vue.use(VueLazyload,{
error: require('./assets/img/404nofind.jpg'), //當(dāng)加載圖片失敗的時(shí)候
loading: require('./assets/img/loading.png'), //當(dāng)加載圖片成功的時(shí)候
preLoad:1
})一些配置的參數(shù)
三、在需要的組件中使用
1）v-lazy
<ul>
<li v-for="(img,a) in list" :key=a>
<img v-lazy="img.name" class="imgs">
</li>
</ul>
data(){
return{
list:[
{name:require('../assets/imgs/01.jpg')},
{name:require('../assets/imgs/02.jpg')},
{name:require('../assets/imgs/03.jpg')},
{name:require('../assets/imgs/04.jpg')},
{name:require('../assets/imgs/05.jpg')},
{name:require('../assets/imgs/06.jpg')},
{name:require('../assets/imgs/07.jpg')},
{name:require('../assets/imgs/08.jpg')},
{name:require('../assets/imgs/09.jpg')},
{name:require('../assets/imgs/010.jpg')},
]
}
},2）v-lazy-container
<div v-lazy-container="{ selector: 'img',error: '../img/404nofind.3b1631e5.jpg', loading: 'loading.1b74fda3.png' }">
<img data-src="../img/01.69e840f9.jpg" class="imgs">//data-src里面的地址是真實(shí)的地址，就是build之后在dist文件夾中的img里面的地址
<img data-src="../img/02.34ef1dfb.jpg" class="imgs">
<img data-src="../img/03.16b6bc13.jpg" class="imgs">
<img data-src="../img/04.cdbc3207.jpg" class="imgs">
<img data-src="../img/05.a4e25273.jpg" class="imgs">
<img data-src="../img/06.3183ae03.jpg" class="imgs">
<img data-src="../img/07.c0057596.jpg" class="imgs">
<img data-src="../img/08.affc19be.jpg" class="imgs">
<img data-src="../img/09.5c1d89c0.jpg" class="imgs">
</div>四、如果在使用中 報(bào)錯(cuò) 如下圖所示
則是因?yàn)榘姹締栴}， 可安裝低版本的 vue-lazyload 來解決該問題：
# 先寫在原有的安裝 npm uninstall vue-lazyload --save # 再安裝低版本的 npm install vue-lazyload@1.3.3 --save
以上就是vue通過vue-lazyload實(shí)現(xiàn)圖片懶加載的代碼詳解的詳細(xì)內(nèi)容，更多關(guān)于vue vue-lazyload圖片懶加載的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue中下拉框組件的封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問題
這篇文章主要介紹了詳解Vue+elementUI build打包部署后字體圖標(biāo)丟失問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
詳解Vue中是如何實(shí)現(xiàn)cache緩存的
這篇文章分享一個(gè)比較有意思的東西，那就是Vue中如何實(shí)現(xiàn)cache緩存的，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
Vue3+elementui plus創(chuàng)建項(xiàng)目的方法
這篇文章主要介紹了Vue3+elementui plus創(chuàng)建項(xiàng)目的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Vue中常用rules校驗(yàn)規(guī)則(實(shí)例代碼)
這篇文章主要介紹了Vue中常用rules校驗(yàn)規(guī)則，本文通過實(shí)例代碼個(gè)大家介紹了一些校驗(yàn)方法,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細(xì)介紹了基于vuejs+webpack的日期選擇插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作
這篇文章主要介紹了Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)手勢(shì)密碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置指南
最近在使用vite生成項(xiàng)目,這篇文章主要給大家介紹了關(guān)于vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
關(guān)于this.$refs獲取不到dom的可能原因及解決方法
這篇文章主要介紹了關(guān)于this.$refs獲取不到dom的可能原因及解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11