vue-lazyload - 圖片延遲載入實例教學

 Usage

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
　　preLoad: 1.3,
　　error: 'dist/error.png',
　　loading: 'dist/loading.gif',
　　attempt: 1
})

Options

參數說明

preLoad 

　　　　說明：

#　　　　範例：

error   

　　　　描述：圖片載入失敗後，的預設圖片

　　　　範例：#error: ' ##loading

　　　　描述：圖片加載過程中，默認顯示的圖片設置

　　　　例子： loading: 'dist/loading.gif',

attempt

　　　　描述：

　　　　範例：

listenEvents

　　　　範例：監聽的事件，預設值  ['scroll', 'wheel', '說明：監聽的事件，預設值  ['scroll', 'wheel', '說明：監聽的事件，預設值  ['scroll', 'wheel', '描述：監聽的事件，預設值  ['scroll', 'wheel', '描述：監聽的事件，預設值'mousmous', 'wewheel', '說明' 'animationend', 'transitionend', 'touchmove']

　　　　範例：listenEvents: [ 'scroll' ]

adapter

filter

　　　描述：過濾圖片的路徑，預設{ }

　　　　範例：

#lazyComponent

　　範例：

#lazyComponent

　　##　　　　範例：

 實戰範例

 在main.js文件添加：
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
　　// 设置默认显示的图片
　　loading: require('common/image/default.png')
})
在需要用到延迟加载页面
<img width="60" height="60" v-lazy="item.imgurl">

#

以上是vue-lazyload - 圖片延遲載入實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！