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

Question

[DZHAMBUALT]

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

Я нашел интересное решение в Интернете. Оно вроде бы работает, но в то же время не решает мою проблему. Вот код:

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 после переадресации на главную страницу

Answer 1

[Алексей Уколов]

Проблема в том, что вы предзагружаете изображения по их реальному пути, а Next, при использовании компонента Image без атрибута unoptimized проксирует их через себя, чтобы работало сжатие и ресайз.

Пути решения два:

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

Comments

[DZHAMBUALT]

Спасибо за помощь.

Перво решение я так понимаю является не лучшим, насколько я знаю при указании unoptimized для Image, они не будут конвертироваться в webp и не будет применять для себя размеры и качество.

Второе решение не совсем понял про вывести width и quality без src в отдельный объект как это понять и использовать. Типа как без src я буду понимать какие пропсы к какому изображения применять или я вас не так понял.

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

[Алексей Уколов]

Покажите, как у вас <Image /> выглядит.

[DZHAMBUALT]

Алексей Уколов,

<Image
    src
    alt
    width
    height 
/>

И у некоторых есть fill

[Алексей Уколов]

Создайте массив с объектами, которые содержат все эти ключи, положите его в отдельный файл и импортируйте на обеих страницах — на одной используйте их для рендера, на другой для передачи в getImageProps().

[DZHAMBUALT]

Алексей Уколов, Я сделал ка вы говорили. Но почему то предварительно загруженные картинки при переходе на главную снова перезагружаются. У них всегда отличается параметр w в запросе. Даже при том что они ссылаются на одни и те же данные из объекта.

Предварително загружаемые


После перехода на главную


Объект данных


Код измененного хука. Отметил место изменения //:

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 }
}

[Алексей Уколов]

Не могу сказать по коду, надо дебажить, откуда берутся эти значения.

[DZHAMBUALT]

Алексей Уколов, Какие? Если вы про imageInfo в хуке то это preload_images на картинке вверху. Наверное все таки придётся прибегнуть к unoptimized

[Алексей Уколов]

Ну как «какие»? Вы же сами написали, что у вас w отличается — поставьте там брейкпоинт и смотрите откуда что берётся.

[DZHAMBUALT]

Я полном замешательстве если я передаю для предварительной загрузки и для отображения одни и те же данные то почему в запросе они разные. Если честно не знаю как дебажить в dev tools.

[Алексей Уколов]

Есть большое количество туториалов (хоть текстовых, хоть видео) на эту тему - выберите тот, который вам понравится и следуйте ему. Тут в комментариях я вас не научу.

если я передаю для предварительной загрузки и для отображения одни и те же данные то почему в запросе они разные

Моя гипотеза - на главной странице они подстраиваются под размер контейнера. Но, повторюсь, надо дебажить, чтобы разобраться точно.