Привет! Мне нужно на одной странице загрузить все изображения другой страницы, чтобы при переходе на другую страницу изображения загружались мгновенно. У меня есть загрузочная страница, мне нужно, чтобы после загрузки всех изображений главной страницы меня перенаправляло с страницы загрузки на главную страницу. Я уже давно сижу над этим, но ничего не получается.
Я нашел интересное решение в Интернете. Оно вроде бы работает, но в то же время не решает мою проблему. Вот код:
import { useEffect, useState } from 'react'
function preloadImage(src: string) {
return new Promise((resolve, reject) => {
const img = new Image()
img.onload = function () {
resolve(img)
}
img.onerror = img.onabort = function () {
reject(src)
}
img.src = src
})
}
export default function useImagePreloader(imageList: string[]) {
const [imagesPreloaded, setImagesPreloaded] = useState<boolean>(false)
useEffect(() => {
let isCancelled = false
async функция 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 }
}
Этот хук вроде бы загружает нужные изображения, но когда я перехожу на главную страницу, они загружаются снова и не моментально.
Network devtools до переадресации на главную
Network devtools после переадресации на главную страницу
