淺談vue中使用圖片懶加載vue-lazyload插件詳細指南
更新時間：2017年10月23日 11:51:53 作者：億傳茗韻
本篇文章主要介紹了淺談vue中使用圖片懶加載vue-lazyload插件詳細指南，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
在vue中使用圖片懶加載詳細指南，分享給大家。具體如下：
說明
當網絡請求比較慢的時候,提前給這張圖片添加一個像素比較低的占位圖片，不至于堆疊在一塊，或顯示大片空白，讓用戶體驗更好一點。
使用方式
使用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' //引入這個懶加載插件
Vue.use(VueLazyload)
// 或者添加VueLazyload 選項
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>
把之前項目中img 標簽里面的 :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ù)選項說明
| key | description | default | options |
|---|---|---|---|
| preLoad | proportion of pre-loading height | 1.3 | Number |
| error | 當加載圖片失敗的時候 | 'data-src' | String |
| loading | 當加載圖片成功的時候 | 'data-src' | String |
| attempt | 嘗試計數(shù) | 3 | Number |
| listenEvents | 想要監(jiān)聽的事件 | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Desired Listen Events |
| adapter | 動態(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' ]
})
如果您遇到這個插件重新設置加載的麻煩，這是很有用的
當你有某些動畫和過渡的時候。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue 封裝 Adminlte3組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
本文主要介紹了vue 權限管理幾種實現(xiàn)方法,權限需要前后端結合,前端盡可能的去控制,更多的需要后臺判斷,具有一定的參考價值,感興趣的可以了解一下2024-02-02
這篇文章主要介紹了vue在組件中使用v-model的場景，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要為大家介紹了如何簡單實現(xiàn)vue驗證碼60秒倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家詳細介紹了vue-dialog的彈出層組件，可以通過npm引用的組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
vue實現(xiàn)導入json解析成動態(tài)el-table樹表格
本文主要介紹了vue實現(xiàn)導入json解析成動態(tài)el-table樹表格，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
element-ui upload組件上傳文件類型限制問題小結
最近我遇到這樣的問題,接受類型已經加了accept 但是當選擇彈出本地選擇文件時候切換到所有文件 之前的文件類型就本根過濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問題小結,感興趣的朋友一起看看吧2024-02-02
vue addRoutes實現(xiàn)動態(tài)權限路由菜單的示例
本篇文章主要介紹了vue addRoutes實現(xiàn)動態(tài)權限路由菜單的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue3+element-plus動態(tài)路由菜單示例代碼
這篇文章主要介紹了vue3+element-plus動態(tài)路由菜單示例代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
詳解vue-cli 本地開發(fā)mock數(shù)據(jù)使用方法
這篇文章主要介紹了詳解vue-cli 本地開發(fā)mock數(shù)據(jù)使用方法，如果后端接口尚未開發(fā)完成，前端開發(fā)一般使用mock數(shù)據(jù)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05