快捷導(dǎo)航

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)文章

React/vue開發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function
這篇文章主要給大家介紹了關(guān)于React/vue開發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function的解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
淺談Vue服務(wù)端渲染框架Nuxt的那些事
這篇文章主要介紹了淺談Vue服務(wù)端渲染框架Nuxt的那些事，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
Vue插件從封裝到發(fā)布的完整步驟記錄
這篇文章主要給大家介紹了關(guān)于Vue插件從封裝到發(fā)布的完整步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能
這篇文章主要介紹了vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能,實(shí)現(xiàn)原理是通過performance.now()獲取動(dòng)畫的時(shí)間戳,用于創(chuàng)建流暢的動(dòng)畫,結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
Vuex的初探與實(shí)戰(zhàn)小結(jié)
這篇文章主要介紹了Vuex的初探與實(shí)戰(zhàn)小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
vue登錄頁(yè)面回車執(zhí)行事件@keyup.enter.native問題
這篇文章主要介紹了vue登錄頁(yè)面回車執(zhí)行事件@keyup.enter.native問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue中自定義右鍵菜單插件
這篇文章主要為大家詳細(xì)介紹了vue中自定義右鍵菜單插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
詳解Vue 項(xiàng)目中的幾個(gè)實(shí)用組件（ts）
這篇文章主要介紹了詳解Vue 項(xiàng)目中的幾個(gè)實(shí)用組件（ts），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue使用$emit實(shí)現(xiàn)同步調(diào)用
這篇文章主要介紹了vue使用$emit實(shí)現(xiàn)同步調(diào)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
vue項(xiàng)目中使用bpmn為節(jié)點(diǎn)添加顏色的方法
這篇文章主要介紹了vue項(xiàng)目中使用bpmn為節(jié)點(diǎn)添加顏色的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04