Promise实现图片预加载

const [isLoadSuccess, setIsLoadSuccess] = useState(true)

// 图片预加载, 传入地址参数

const loadImage = imageSrc => {

// resolve 标志成功时执行的语句

// reject 标志失败时执行的语句

return new Promise((resolve, reject) => {

const image = new Image()

image.src = imageSrc

// 如果图片已经存在于浏览器缓存，直接调用回调函数

if (image.complete) {

resolve(image)

// 直接返回，不用再处理onload事件

return

}

// 加载成功

image.onload = () => {

resolve(image)

}

// 加载失败

image.onerror = () => {

setIsLoadSuccess(false)

reject('图片加载错误')

}

})

}

 

// 验证图片地址是否有效

useEffect(() => {

loadImage(value).then(result => {

if (result.fileSize > 0 || (result.width > 0 && result.height > 0)) setIsLoadSuccess(true)

})

}, [value])