Задать вопрос
DZHAMBULAT-SAMOUCHKA
@DZHAMBULAT-SAMOUCHKA
Frontend разработчик

Как предварительно загрузить картинки, чтобы они загружались мгновенно?

Привет! Мне нужно на одной странице загрузить все изображения другой страницы, чтобы при переходе на другую страницу изображения загружались мгновенно. У меня есть загрузочная страница, мне нужно, чтобы после загрузки всех изображений главной страницы меня перенаправляло с страницы загрузки на главную страницу. Я уже давно сижу над этим, но ничего не получается.

Я нашел интересное решение в Интернете. Оно вроде бы работает, но в то же время не решает мою проблему. Вот код:
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 до переадресации на главную 670a3c7cb3806677653806.png
Network devtools после переадресации на главную страницу 670a3c8e0f8d7361497445.png
  • Вопрос задан
  • 75 просмотров
Подписаться 1 Средний Комментировать
Решения вопроса 1
Проблема в том, что вы предзагружаете изображения по их реальному пути, а Next, при использовании компонента Image без атрибута unoptimized проксирует их через себя, чтобы работало сжатие и ресайз.

Пути решения два:
  1. На главной странице указать всем изображениям unoptimized. Тогда изображения просто будут грузиться с указанного адреса безо всякой дополнительной обработки.
  2. В вашем хуке получать через getImageProps() некстовский путь до изображения и предзагружать его. Тут важно ещё вынести пропсы width и quality (а лучше вообще все, кроме src) для Image с главной страницы в отдельный объект, который можно будет импортировать в файле хука, чтобы и там и там параметры были одинаковыми. Иначе, если вы на главной поменяете размеры или качество, прелоадинг снова сломается (потому что изменится итоговый url).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы