vue-img-preload
預(yù)加載頁(yè)面上的圖片資源，提高用戶體驗(yàn)
效果預(yù)覽
使用方法
瀏覽器中
- 下載vue-img-preload插件
npm install vue-img-preload
- 在頁(yè)面中引入dist目錄下的preload.min.js文件（確保此時(shí)頁(yè)面已經(jīng)引入vue.js），如
<script src="path/dist/preload.min.js"></script>
- 首先創(chuàng)建一個(gè)空的Vue實(shí)例，用于頁(yè)面中的事件監(jiān)聽。調(diào)用Vue.use方法裝載Preload插件晒衩，并傳入配置參數(shù)，eachLoaded在每張圖片下載完成后都會(huì)執(zhí)行該方法， allLoaded則在所有圖片都下載完成后執(zhí)行奋构，此處分別觸發(fā)一個(gè)eachload，allload事件拱层，并傳回部分內(nèi)部處理參數(shù)弥臼，如已下載圖片數(shù)量，圖片下載完成后的event對(duì)象舱呻。
// 非父子組件通信
var bus = new Vue()
// 安裝插件
Vue.use(Preload, {
eachLoaded: function(msg) {
bus.$emit('eachload', msg)
},
allLoaded: function(msg) {
bus.$emit('allload'醋火，msg)
}
})
- 此時(shí)Vue對(duì)象中添加一個(gè)v-preload指令，可以在Vue管理的結(jié)構(gòu)中使用箱吕，<div v-preload="imgs"></div>芥驳，并傳入?yún)?shù)。
// 頁(yè)面結(jié)構(gòu)
<div id="app">
<div class="spinner" :class="[isLoaded ? 'loading' : '']">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<div v-preload="imgs"></div>
<div class="pics">
<img v-for="img in imgs" :src="img" alt="" width=250 />
</div>
</div>
// 數(shù)據(jù)
var vm = new Vue({
el: '#app',
data: function() {
return {
isLoaded: false,
imgs: [
'https://github.com/DiligentYe/some-picture/blob/master/IMG_0923.JPG?raw=true',
'https://github.com/DiligentYe/some-picture/blob/master/IMG_3606.JPG?raw=true',
'https://github.com/DiligentYe/some-picture/blob/master/IMG_3657.JPG?raw=true',
'https://github.com/DiligentYe/some-picture/blob/master/IMG_3715.JPG?raw=true',
'https://github.com/DiligentYe/some-picture/blob/master/IMG_3775.JPG?raw=true',
'https://github.com/DiligentYe/some-picture/blob/master/IMG_3789.JPG?raw=true',
'https://github.com/DiligentYe/some-picture/blob/master/IMG_3791.JPG?raw=true',
'https://github.com/DiligentYe/some-picture/blob/master/IMG_3832.JPG?raw=true',
'https://github.com/DiligentYe/some-picture/blob/master/IMG_3833.JPG?raw=true',
'https://github.com/DiligentYe/some-picture/blob/master/IMG_3910.JPG?raw=true'
]
}
}
})
// 注冊(cè)eachload茬高，allload事件處理函數(shù)兆旬，當(dāng)所有圖片都下載完畢后，通過(guò)控制isLoaded的值怎栽，控制loading類丽猬，從而控制加載動(dòng)畫
bus.$on('eachload', function(msg) {
console.log(msg.total)
})
bus.$on('allload', function(msg) {
vm.isLoaded = true
})
注：可運(yùn)行vue-img-preload/test/web/simple.html查看效果
- 上述方法中宿饱，在裝載插件的時(shí)候統(tǒng)一配置eachLoaded，和allLoaded配置項(xiàng)脚祟，如果針對(duì)頁(yè)面中多個(gè)部分分別進(jìn)行配置谬以，此時(shí)需要給v-preload傳入一個(gè)Object參數(shù)，其中包含imgs和options屬性由桌，分別對(duì)應(yīng)圖片地址數(shù)組和特定配置項(xiàng)为黎，如下:
infos: {
imgs: ['https://github.com/DiligentYe/some-picture/blob/master/IMG_0923.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3606.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3657.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3715.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3775.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3789.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3791.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3832.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3833.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3910.JPG?raw=true'],
options: {
allLoaded: function(msg) {
bus.$emit('allload')
}
}
}
datas: {
imgs: ['https://github.com/DiligentYe/some-picture/blob/master/IMG_4030.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_4056.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_4967.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_4968.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_4969.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_4970.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_4971.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_4972.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_4973.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_4974.JPG?raw=true'],
options: {
type: 'order ',
eachLoaded: function(msg) {
bus.$emit('eachload', msg)
},
allLoaded: function(msg) {
bus.$emit('allload')
}
}
}
針對(duì)infos，只會(huì)在所有圖片下載完成的時(shí)候觸發(fā)allload行您，而datas铭乾，則設(shè)置了圖片有序下載，并且單張下載完畢和所有圖片下載完畢都會(huì)執(zhí)行相應(yīng)的動(dòng)作娃循。
注：可運(yùn)行vue-img-preload/test/web/index.html查看效果
組件中
大體用法與在頁(yè)面中一致炕檩，具體用法可參考vue-img-preload/test/module/test.js寫法，運(yùn)行結(jié)果可運(yùn)行npm run dev捌斧，啟動(dòng)一個(gè)服務(wù)器笛质，訪問(wèn)對(duì)應(yīng)地址即可。
配置參數(shù)
eachLoaded(function): 每次加載成功圖片的行為骤星，默認(rèn)在控制臺(tái)打印one picture has been loaded经瓷。
allLoaded(function): 所有圖片加載成功的行為，默認(rèn)在控制臺(tái)打印all picture has been loaded洞难。
type(string): 圖片有序／無(wú)序加載舆吮，默認(rèn)為’disorder‘，采用無(wú)序加載队贱，如果type值不為’disorder‘色冀，則采用有序加載。使用有序加載時(shí)柱嫌，建議設(shè)置為‘order’锋恬。
max: 一次加載的照片個(gè)數(shù)，默認(rèn)值為1000编丘，當(dāng)圖片數(shù)量小于max時(shí)与学，加載所有圖片；當(dāng)圖片的數(shù)量大于max時(shí)嘉抓，采用分塊加載索守，當(dāng)前塊加載完畢后才會(huì)加載下一塊，每塊的長(zhǎng)度為max
