import { TPreloadImage, TPreloadImages } from '@/constants/preload_image'
import { getImageProps } from 'next/image'
import { useEffect, useState } from 'react'
function preloadImage(imageInfo: TPreloadImage) {
return new Promise((resolve, reject) => {
const img = new Image()
////////////////////////////////////
const load = getImageProps({
...imageInfo,
})
img.onload = function () {
resolve(img)
}
img.onerror = img.onabort = function () {
reject(load.props.src)
}
img.src = load.props.src
////////////////////////////////////
})
}
export default function useImagePreloader(imageList: TPreloadImages) {
const [imagesPreloaded, setImagesPreloaded] = useState<boolean>(false)
useEffect(() => {
let isCancelled = false
async function effect() {
if (isCancelled) {
return
}
const imagesPromiseList: Promise<any>[] = []
for (const i of imageList) {
imagesPromiseList.push(preloadImage(i))
}
await Promise.all(imagesPromiseList)
if (isCancelled) {
return
}
setImagesPreloaded(true)
}
effect()
return () => {
isCancelled = true
}
}, [imageList])
return { imagesPreloaded }
}
