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

Question

SereneStrider

nextjs

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

Привет! Мне нужно реализовать загрузку всех изображений с одной страницы на другой, чтобы они загружались мгновенно при переходе на целевую страницу. У меня уже есть загрузочная страница, и мне нужно, чтобы после завершения загрузки всех изображений главной страницы я автоматически перенаправлялся с этой загрузочной страницы на главную. Я уже некоторое время работаю над этой задачей, но безуспешно. <br/> <br/> Я нашел одно решение в Интернете, которое, похоже, работает, однако оно не полностью решает мою проблему. Вот код: <br/> <pre><code class="javascript">import { useEffect, useState } from 'react'

function preloadImage(src: string) {
	return new Promise((resolve, reject) =&gt; {
		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&lt;boolean&gt;(false)

	useEffect(() =&gt; {
		let isCancelled = false

		async function effect() {
			if (isCancelled) {
				return
			}

			const imagesPromiseList: Promise&lt;any&gt;[] = []
			for (const i of imageList) {
				imagesPromiseList.push(preloadImage(i))
			}

			await Promise.all(imagesPromiseList)

			if (isCancelled) {
				return
			}

			setImagesPreloaded(true)
		}

		effect()

		return () =&gt; {
			isCancelled = true
		}
	}, [imageList])

	return { imagesPreloaded }
}</code></pre> <br/> <br/> Этот хук, кажется, загружает необходимые изображения, однако при переходе на главную страницу они загружаются вновь и не мгновенно. <br/> <br/> Network devtools до переадресации на главную.

12 октября 2024 г. 9:12

Ответы на вопрос 2

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

Answer 1

Чтобы произвести предзагрузку изображений и обеспечить их мгновенное отображение на целевой странице, необходимо учесть несколько факторов, таких как использование кэша браузера и правильная инициализация состояния. Во-первых, давайте разберем ваш текущий подход с использованием вашего `useImagePreloader` и добавим несколько улучшений.

### 1. Убедитесь, что изображения кэшируются:

Когда вы загружаете изображения с помощью JavaScript, убедитесь, что они будут храниться в кэше браузера. Браузер сможет быстро загрузить их из кэша, если они загружены заранее. Ваша функция `preloadImage` правильно реализована, и изображения будут кэшироваться.

### 2. Убедитесь, что использование хука и перенаправление корректное:

Вам нужно будет:

- Вызвать ваш хук на загрузочной странице.
- После завершения загрузки изображений перенаправить пользователя на главную страницу.

Вот как это можно сделать:

```javascript
import { useEffect } from 'react';
import useImagePreloader from './useImagePreloader'; // Импортируйте ваш хук

const imageList = [
    // Здесь добавьте все ваши URL изображений
];

function LoadingPage() {
    const { imagesPreloaded } = useImagePreloader(imageList);
    
    useEffect(() => {
        if (imagesPreloaded) {
            // Здесь вы можете перенаправить на главную страницу
            window.location.href = '/main'; // или использовать react-router
        }
    }, [imagesPreloaded]);

    return (
        <div>
            <h1>Загрузка...</h1>
            {!imagesPreloaded && <p>Загрузка изображений...</p>}
        </div>
    );
}

export default LoadingPage;
```

### 3. Убедитесь, что изображения загружаются заранее:

Вы можете убедиться, что изображения загружаются заранее, добавляя их к вашему `imageList` в соответствии с тем, что у вас есть на главной странице.

### 4. Используйте правильный механизм перенаправления:

- Если вы используете `react-router`, вы можете использовать `useHistory` или `useNavigate` для перенаправления:
  
```javascript
import { useNavigate } from 'react-router-dom';
// ...

const navigate = useNavigate();

useEffect(() => {
    if (imagesPreloaded) {
        navigate('/main');
    }
}, [imagesPreloaded]);
```

### 5. Не забудьте оптимизировать изображения:

Убедитесь, что ваши изображения оптимизированы для веба. Это может существенно ускорить их загрузку и улучшить скорость работы вашего сайта.

### Заключение

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

Answer 2

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