Блог

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

Заставка загрузки первой страницы при извлечении больших статических ресурсов в Next.js

#javascript #reactjs #next.js #splash-screen #prefetch

Вопрос:

У меня есть веб-страница, написанная на Next.js у этого есть видео в качестве фона на главной странице.

 const VideoBackground = ({video}) => {
    return (
        <div className="video_container">
            <video autoPlay muted loop={true} preload="auto" className="video_background">
                <source src={video} type="video/mp4" />
            </video>
        </div>
    );
}

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

Я думал добавить заставку:

 const Splash = ({ children }) => {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    // Load the heavy asset
    fetch('myvideo.mp4').then(() => {
      setLoading(false);
    })
  }, [])

  return !loading ? children : <div>Loading....</div>
};

и в моем _app.js:

 ...
return (
    <Splash>
        <Component {...pageProps} />
    </Splash>
)
...

Заставка видна в течение нескольких мгновений, но затем страница загружается без показа видео, которое загружается через несколько секунд.
Что я делаю не так?

Комментарии:

1. Вы пробовали использовать onLoadedData событие в video компоненте, чтобы дождаться его загрузки? Кроме того, где VideoBackground отображается?

2. Изображение VideoBackground отображается на нескольких страницах с различными источниками видео. Я не думаю, что было бы удобно передавать обратный вызов по дереву. Я мог бы попробовать реализовать это с помощью поставщика react. Не следует ли автоматически кэшировать статические ресурсы с помощью next.js? То есть, если я визуализирую много <видео> компонентов с одним и тем же источником, источник должен быть запрошен с сервера только один раз. Вот в чем причина моего (нерабочего) решения.

Метки: