89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
import { ref } from 'vue'
|
|
import { $XXL, isWebEvn } from '@/utils'
|
|
|
|
export const useLoad = () => {
|
|
const size = ref(0)
|
|
const loadSize = ref(0)
|
|
const loadProgress = ref('0%')
|
|
const loaded = ref(false)
|
|
const loadText = ref('')
|
|
let close = false
|
|
|
|
const init = (arr: any, config: { timeout?: number; android?: boolean } = {}) => {
|
|
loadSize.value = 0
|
|
loaded.value = false
|
|
loadProgress.value = '0%'
|
|
close = false
|
|
if (config.android) {
|
|
size.value = arr.c
|
|
$XXL.loadResources({ data: arr }, (res, next) => {
|
|
load(
|
|
{
|
|
src: res.data.url,
|
|
},
|
|
true,
|
|
)
|
|
ok(res.data.url)
|
|
next()
|
|
})
|
|
} else {
|
|
size.value = arr.length
|
|
if (arr.length) {
|
|
arr.forEach((i: string) => {
|
|
load({ src: i })
|
|
})
|
|
} else {
|
|
loadProgress.value = '100%'
|
|
loaded.value = true
|
|
}
|
|
}
|
|
}
|
|
|
|
const load = (item: { src: string; numberOfFail?: number }, silence = false) => {
|
|
const img = new Image()
|
|
if (!/^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i.test(item.src))
|
|
return ok(item.src)
|
|
img.src = item.src
|
|
if (silence) {
|
|
img.addEventListener('load', () => {})
|
|
} else {
|
|
img.addEventListener('load', () => ok(item.src))
|
|
img.addEventListener('error', () => {
|
|
item.numberOfFail ? item.numberOfFail++ : (item.numberOfFail = 1)
|
|
if (item.numberOfFail && item.numberOfFail > 2) {
|
|
ok(item.src)
|
|
// XMessage.error('加载失败，网络异常，请刷新或稍后重试');
|
|
} else {
|
|
load(item)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// 加载完成
|
|
const ok = (src?: string) => {
|
|
loadSize.value++
|
|
const progress = Math.round((loadSize.value / size.value) * 100)
|
|
loadProgress.value = progress + '%'
|
|
// loadText.value = src?.split('/').pop() || '';
|
|
|
|
if (!isWebEvn && progress > 2 && !close) {
|
|
close = true
|
|
$XXL.closeLoading()
|
|
}
|
|
|
|
setTimeout(() => {
|
|
loaded.value = Number(loadProgress.value.replace('%', '')) >= 100
|
|
}, 500)
|
|
}
|
|
|
|
return {
|
|
size,
|
|
loadSize,
|
|
loadProgress,
|
|
loaded,
|
|
loadText,
|
|
init,
|
|
}
|
|
}
|