feat(新工具类): 预加载图片工具类
This commit is contained in:
parent
085cb8e9f2
commit
e31ec3d505
55
src/utils/imagePreloader.js
Normal file
55
src/utils/imagePreloader.js
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
// src/utils/imagePreloader.js
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 简单图片预加载函数
|
||||||
|
* @param {Array|string|Object} sources - 图片源(数组、字符串或对象)
|
||||||
|
*/
|
||||||
|
export const preloadImages = (sources) => {
|
||||||
|
let urls = []
|
||||||
|
|
||||||
|
if (Array.isArray(sources)) {
|
||||||
|
urls = sources
|
||||||
|
} else if (typeof sources === 'string') {
|
||||||
|
urls = [sources]
|
||||||
|
} else if (typeof sources === 'object') {
|
||||||
|
urls = Object.values(sources)
|
||||||
|
}
|
||||||
|
|
||||||
|
urls.forEach((url) => {
|
||||||
|
const img = new Image()
|
||||||
|
img.src = url
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log(`开始预加载 ${urls.length} 张图片`)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带进度监控的图片预加载函数
|
||||||
|
* @param {Array|string|Object} sources - 图片源
|
||||||
|
* @param {Function} onProgress - 进度回调
|
||||||
|
*/
|
||||||
|
export const preloadImagesWithProgress = (sources, onProgress) => {
|
||||||
|
let urls = []
|
||||||
|
|
||||||
|
if (Array.isArray(sources)) {
|
||||||
|
urls = sources
|
||||||
|
} else if (typeof sources === 'string') {
|
||||||
|
urls = [sources]
|
||||||
|
} else if (typeof sources === 'object') {
|
||||||
|
urls = Object.values(sources)
|
||||||
|
}
|
||||||
|
|
||||||
|
let loaded = 0
|
||||||
|
const total = urls.length
|
||||||
|
|
||||||
|
urls.forEach((url) => {
|
||||||
|
const img = new Image()
|
||||||
|
img.onload = img.onerror = () => {
|
||||||
|
loaded++
|
||||||
|
if (onProgress) {
|
||||||
|
onProgress({ loaded, total, url })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img.src = url
|
||||||
|
})
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user