在 Next.js 中获取大型静态资产时第一页加载启动画面

问题描述

我有一个用 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>
)
...

启动画面会显示片刻，但随后页面加载时不显示视频，视频会在几秒钟后加载。 我做错了什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）