淺談vue中使用圖片懶加載vue-lazyload插件詳細(xì)指南
在vue中使用圖片懶加載詳細(xì)指南，分享給大家。具體如下：
說明
當(dāng)網(wǎng)絡(luò)請(qǐng)求比較慢的時(shí)候,提前給這張圖片添加一個(gè)像素比較低的占位圖片，不至于堆疊在一塊，或顯示大片空白，讓用戶體驗(yàn)更好一點(diǎn)。
使用方式
使用vue的 vue-lazyload 插件
插件地址:https://www.npmjs.com/package/vue-lazyload
案例
demo： 懶加載案例demo
Installation 安裝方式
npm
$ npm i vue-lazyload -D
CDN
CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script> <script> Vue.use(VueLazyload) ... </script>
用法
main.js 在入口文件
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload' //引入這個(gè)懶加載插件
Vue.use(VueLazyload)
// 或者添加VueLazyload 選項(xiàng)
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
new Vue({
el: 'body',
components: {
App
}
})
在入口文件添加后，在組件任何地方都可以直接使用把 img 里的:src -> v-lazy
<div class="pic"> <a href="#" rel="external nofollow" rel="external nofollow" ><img :src="'/static/img/' + item.productImage" alt=""></a> </div>
把之前項(xiàng)目中img 標(biāo)簽里面的 :src 屬性 改成 v-lazy
<div class="pic"> <a href="#" rel="external nofollow" rel="external nofollow" ><img v-lazy="'/static/img/' + item.productImage" alt=""></a> </div>
參數(shù)選項(xiàng)說明
| key | description | default | options |
|---|---|---|---|
| preLoad | proportion of pre-loading height | 1.3 | Number |
| error | 當(dāng)加載圖片失敗的時(shí)候 | 'data-src' | String |
| loading | 當(dāng)加載圖片成功的時(shí)候 | 'data-src' | String |
| attempt | 嘗試計(jì)數(shù) | 3 | Number |
| listenEvents | 想要監(jiān)聽的事件 | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Desired Listen Events |
| adapter | 動(dòng)態(tài)修改元素屬性 | { } | Element Adapter |
| filter | 圖片監(jiān)聽或過濾器 | { } | Image listener filter |
| lazyComponent | lazyload component | false | Lazy Component |
| dispatchEvent | 觸發(fā)dom事件 | false | Boolean |
| throttleWait | throttle wait | 200 | Number |
| observer | use IntersectionObserver | false | Boolean |
| observerOptions | IntersectionObserver options | { rootMargin: '0px', threshold: 0.1 } | IntersectionObserver |
想要監(jiān)聽的事件
您可以通過傳遞數(shù)組來配置想要使用vue - lazyload的事件
監(jiān)聽器的名字。
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1,
// the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
listenEvents: [ 'scroll' ]
})
如果您遇到這個(gè)插件重新設(shè)置加載的麻煩，這是很有用的
當(dāng)你有某些動(dòng)畫和過渡的時(shí)候。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue 封裝 Adminlte3組件的實(shí)現(xiàn)
這篇文章主要介紹了vue 封裝 Adminlte3組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue 權(quán)限管理幾種實(shí)現(xiàn)方法
本文主要介紹了vue 權(quán)限管理幾種實(shí)現(xiàn)方法,權(quán)限需要前后端結(jié)合,前端盡可能的去控制,更多的需要后臺(tái)判斷,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
這篇文章主要介紹了vue在組件中使用v-model的場(chǎng)景，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
簡(jiǎn)單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能
這篇文章主要為大家介紹了如何簡(jiǎn)單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家詳細(xì)介紹了vue-dialog的彈出層組件，可以通過npm引用的組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue實(shí)現(xiàn)導(dǎo)入json解析成動(dòng)態(tài)el-table樹表格
本文主要介紹了vue實(shí)現(xiàn)導(dǎo)入json解析成動(dòng)態(tài)el-table樹表格，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
element-ui upload組件上傳文件類型限制問題小結(jié)
最近我遇到這樣的問題,接受類型已經(jīng)加了accept 但是當(dāng)選擇彈出本地選擇文件時(shí)候切換到所有文件 之前的文件類型就本根過濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問題小結(jié),感興趣的朋友一起看看吧2024-02-02
vue addRoutes實(shí)現(xiàn)動(dòng)態(tài)權(quán)限路由菜單的示例
本篇文章主要介紹了vue addRoutes實(shí)現(xiàn)動(dòng)態(tài)權(quán)限路由菜單的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
vue3+element-plus動(dòng)態(tài)路由菜單示例代碼
這篇文章主要介紹了vue3+element-plus動(dòng)態(tài)路由菜單示例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
詳解vue-cli 本地開發(fā)mock數(shù)據(jù)使用方法
這篇文章主要介紹了詳解vue-cli 本地開發(fā)mock數(shù)據(jù)使用方法，如果后端接口尚未開發(fā)完成，前端開發(fā)一般使用mock數(shù)據(jù)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05