Медленный рендеринг изображения из кеша ⇐ Javascript

[Anonymous]

Я пытаюсь динамически предварительно загрузить следующее изображение при вводе мыши или через 400 мс. На вкладке сеть видно, что работает корректно. Но даже несмотря на то, что на вкладке «Сеть» указано, что оно кэшируется и не выполняет запрос, первый рендеринг любого изображения происходит медленнее, чем последующие. Есть идеи, почему?

function RouteComponent() {
const images = {
1: "",
2: "",
3: "",
4: "",
5: "",
}

const [page, setPage] = useState(1)
const loadedImagesRef = useRef(new Set([1]))

const handleChange = (_event: React.ChangeEvent, value: number) => {
setPage(value) // Update the state with the new page
console.log("Current page:", value) // Log the current page
setTimeout(() => {
fetchNewImage(value)
console.log("fired")
}, 400)
}

const fetchNewImage = (value: number) => {
if (!images[(value + 1) as keyof typeof images]) {
return
}
if (loadedImagesRef.current.has(value + 1)) {
return
}
const img = new Image()
img.src = images[(value + 1) as keyof typeof images]
}

const handleHover = () => {
fetchNewImage(page)
}

return (






)
}



Подробнее здесь: https://stackoverflow.com/questions/793 ... from-cache