Commit 961983ea authored by 毛线's avatar 毛线

loading优化

parent fcf575d5
<template> <template>
<div class="header"> <div class="header">
<div class="left-block"> <div class="left-block">
<img src="./static/logo.png" alt="" class="logo"> <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/logo.png" alt="" class="logo">
<div class="data"> <div class="data">
{{ time | filterData }} {{ time | filterData }}
</div> </div>
...@@ -38,10 +38,10 @@ ...@@ -38,10 +38,10 @@
</div> </div>
<div class="right-block"> <div class="right-block">
<div v-audio class="btn exit" @click="click().quit()"> <div v-audio class="btn exit" @click="click().quit()">
<img src="./static/exit-button.png" alt=""> <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Exit%20Button.png" alt="">
</div> </div>
<div class="btn full-screen" @click="click().fullScreen()"> <div class="btn full-screen" @click="click().fullScreen()">
<img v-audio src="./static/full-screen-button.png" alt=""> <img v-audio src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Full%20Screen%20Button.png" alt="">
</div> </div>
</div> </div>
<Confirm ref="confirm" title="登出" message="您要登出当前账号吗?" @confirm="() => network().quitAccount()"/> <Confirm ref="confirm" title="登出" message="您要登出当前账号吗?" @confirm="() => network().quitAccount()"/>
...@@ -201,7 +201,7 @@ export default { ...@@ -201,7 +201,7 @@ export default {
top: 0; top: 0;
width: 110px; width: 110px;
height: 108px; height: 108px;
background-image: url(./static/right-block-bg.png); background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Logout%20Button1.png);
background-size: 100% 100%; background-size: 100% 100%;
box-sizing: border-box; box-sizing: border-box;
z-index: 999; z-index: 999;
...@@ -231,8 +231,8 @@ export default { ...@@ -231,8 +231,8 @@ export default {
.bar { .bar {
padding-left: 170px; padding-left: 170px;
display: flex; display: flex;
height: 80px; height: 78px;
background-image: url(./static/bar-background.png); background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Bar%20Background.png);
background-size: auto 100%; background-size: auto 100%;
background-position: center; background-position: center;
position: absolute; position: absolute;
...@@ -278,7 +278,7 @@ export default { ...@@ -278,7 +278,7 @@ export default {
margin-left: 8px; margin-left: 8px;
width: 180px; width: 180px;
height: 80px; height: 80px;
background-image: url(./static/profile/bg.png); background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/headBg.png);
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
.profile-img { .profile-img {
......
...@@ -35,5 +35,11 @@ ...@@ -35,5 +35,11 @@
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/ic_autoChinese.png", "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/ic_autoChinese.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Autospinning%20Count-Down.png", "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Autospinning%20Count-Down.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-01.png", "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-03.png" "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_auto-03.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Logout%20Button1.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Exit%20Button.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Full%20Screen%20Button.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/headBg.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Bar%20Background.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/logo.png"
] ]
...@@ -62,8 +62,7 @@ export default { ...@@ -62,8 +62,7 @@ export default {
const max = 12 // 最多显示的数量 const max = 12 // 最多显示的数量
let filled = 0 let filled = 0
const { loadingProgress } = this const { loadingProgress } = this
console.log('loadingProgress', loadingProgress) filled = max * loadingProgress
filled = 12 * loadingProgress
return Math.ceil(filled) return Math.ceil(filled)
}, },
}, },
...@@ -108,6 +107,9 @@ export default { ...@@ -108,6 +107,9 @@ export default {
img.onload = () => { img.onload = () => {
this.loadPageImgComplete++ this.loadPageImgComplete++
} }
img.onerror = () => {
this.loadPageImgComplete++
}
} }
}) })
}, },
...@@ -126,7 +128,7 @@ export default { ...@@ -126,7 +128,7 @@ export default {
loadResources() { loadResources() {
const { imagesSrcList, audioSrcList } = this const { imagesSrcList, audioSrcList } = this
const imagesLength = imagesSrcList.length const imagesLength = imagesSrcList.length
const audioLength = audioSrcList.length const audioLength = 0 // audioSrcList.length // 先不判断音频数量
this.downloadTotal = imagesLength + audioLength this.downloadTotal = imagesLength + audioLength
imagesSrcList.forEach(src => { imagesSrcList.forEach(src => {
const img = new Image() const img = new Image()
...@@ -137,14 +139,17 @@ export default { ...@@ -137,14 +139,17 @@ export default {
img.onload = () => { img.onload = () => {
this.downloadImage++ this.downloadImage++
} }
img.onerror = () => {
this.downloadImage++
}
} }
}) })
audioSrcList.forEach(src => { audioSrcList.forEach(src => {
const audio = new Audio() const audio = new Audio()
audio.src = src audio.src = src
audio.addEventListener('canplay', () => { // audio.addEventListener('canplay', () => {
this.downloadAudio++ // this.downloadAudio++
}) // })
}) })
}, },
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment