javascript 下一篇：JS：Loading Screen While the dom is rendeing

nzk0hqpo 于 2023-09-29 发布在 Java

关注(0)|答案(8)|浏览(103)

我怎样才能显示我自己的加载器，而不是一个空白的白色屏幕？例如，推特显示标志，而页面正在加载，同样的Facebook，谷歌AdSense等。看看这个Gif，我想在Next Js.

中看到这样的东西
我猜这和_document.js有关。对于react js也有类似的问题（在index.html中呈现加载器），但我不知道如何在下一个js中做到这一点。

JavaScript

来源：https://stackoverflow.com/questions/68118383/next-js-loading-screen-while-the-dom-is-rendeing

8条答案

按热度按时间

ghhkc1vu1#

要在Nextjs上添加闪屏，你可以用几种方法来做。这是我最喜欢的解决方案。

/**
 * inside _app.js function for remove the loader
 */
useEffect(() => {
  if (typeof window !== 'undefined') {
    const loader = document.getElementById('globalLoader');
    if (loader)
      loader.remove();
  }
}, []);

/* Style.css or global.css */

#globalLoader {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

/** * on _document.js insert below code after body tag * More about _document.js -> https://nextjs.org/docs/advanced-features/custom-document */

<div id="globalLoader">
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" alt="" />
</div>

赞(0）回复(0）举报 2023-09-29

pb3skfrl2#

通常这些都是通过一个覆盖所有内容的div来完成的，并且默认情况下显示，你在那个div中放什么取决于你（gif，svg等）。一旦window.onload被调用，只需隐藏div，它就会显示完全呈现的dom。
下面是一个基本例子（我在移动设备上，所以请原谅我的格式）CSS：

.loadingsScreen{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color: #whatever-color;
        z-index: 10;  /*just make sure it's the highest on the page*/
}

JS：

window.onload = function(){
        $("#loadingScreen").fadeOut(); //just make it hide the overlaying div, I used jQuery in this example but there are many ways to do this
};

赞(0）回复(0）举报 2023-09-29

5vf7fwbs3#

无需安装任何库

import { useRouter } from "next/router";
import { useState, useEffect } from "react";

function MyApp() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    router.events.on("routeChangeError", (e) => setLoading(false));
    router.events.on("routeChangeStart", (e) => setLoading(false));
    router.events.on("routeChangeComplete", (e) => setLoading(true));

    return () => {
      router.events.off("routeChangeError", (e) => setLoading(false));
      router.events.off("routeChangeStart", (e) => setLoading(false));
      router.events.off("routeChangeComplete", (e) => setLoading(true));
    };
  }, [router.events]);

  return <>{loading ? "loading..." : <AppComponent />}</>;
}

赞(0）回复(0）举报 2023-09-29

2wnc66cl4#

使用suspense，nextjs支持它，但在使用它之前有一些事情值得考虑。

假设你使用的是NextJs 13和app目录：

在app目录下创建一个文件loading.js或anyname。这将是你的布局显示，而DOM是渲染，设计它，但你想要的，把gif/svgs的任何需要。

正在加载.js

export default function Loading() {
    return (
        <div className="fixed inset-0 bg-blue-500 z-[10000] flex flex-1 items-center justify-center">
        Loading
        </div>
    );
}

那么你的布局文件应该看起来像这样：

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Suspense fallback={<Loading />}>{children}</Suspense>
      </body>
    </html>
  );
}

只要你的DOM被渲染了，你就会看到它在一些页面上的渲染就像flas一样，而在另一些页面上的渲染则很慢，这取决于你的页面大小。如果需要的话，你可以查找、延迟Suspense或添加惰性组件。
提示：使用Lottie Animations制作加载或任何较小尺寸的svg和rotate使用css动画来保持悬念内容较小。

赞(0）回复(0）举报 2023-09-29

ulydmbyx5#

实际上，这不是Next.js提供的“开箱即用”的东西，你必须自己实现这些东西，你可以使用一些全局状态（redux/context）来确定你的应用是否正在加载一些东西，并根据这个状态渲染加载器。

赞(0）回复(0）举报 2023-09-29

t9aqgxwy6#

试试这个逻辑。创建一个状态变量并使用NextJs Router事件。使用路由器事件来控制状态变量，最后使用状态变量来控制加载屏幕和其他DOM元素的呈现。

function MyApp(){
     const [loading, setLoading] = React.useState<boolean>(false);

     Router.events.on('routeChangeStart', (url) => {
       setLoading(true);
      });

     Router.events.on('routeChangeComplete', (url) => {
       setLoading(false);
     });
    

    return(
      <>
        {loading ? (
            <PageLoader />
          ) : (
            <AppLayout>
              <Component {...pageProps} />
            </AppLayout>
          )}
    </>
  )
}

赞(0）回复(0）举报 2023-09-29

hi3rlvi27#

你不能。你看到的是自定义启动画面，抽搐加载器显示你。它所做的是将加载过程分为两部分。第一个是标准的-浏览器请求和接收您提供的用于呈现页面的html和脚本文件。你不能用传统的Web应用程序绕过这个阶段，但是你可以做的是改善用户体验，最大限度地减少这个时间。一个很好的例子是index.html，它包含内联的css和JavaScript，可以动画化闪屏，一旦加载就可以启动实际的应用程序。以这种方式，在浏览器呈现页面之后完成真实的数据交换。这需要您在规划应用程序时做大量的工作，但是使用现代框架和工具，肯定有更短和更脏的路径来实现它。如果你有一个SPA，这是你唯一可以去的地方。
顺便说一下，如果你想加快网站的加载速度（这就是为什么无论如何都需要闪屏），只需运行一些分析，检查优化。服务器端缓存通常会给你最好的ROI，但它不会帮助你更重的负载（大图像，或大量的小图像）。分割html是第二个最好的选择。然后你应该看看导入的库和东西，这些往往会增加一点。最后，还有压缩服务器上的数据以限制数据负载的选项。

赞(0）回复(0）举报 2023-09-29

41ik7eoe8#

你可以使用router. event。
查看此链接：
https://github.com/vercel/next.js/blob/canary/examples/with-loading/pages/_app.js
使用效果（（）=> { const handleStart =（url）=> { console.log（Loading: ${url}）NProgress.start（）} const handleStop =（）=> { NProgress.done（）}

router.events.on('routeChangeStart', handleStart)
router.events.on('routeChangeComplete', handleStop)
router.events.on('routeChangeError', handleStop)

return () => {
  router.events.off('routeChangeStart', handleStart)
  router.events.off('routeChangeComplete', handleStop)
  router.events.off('routeChangeError', handleStop)
}

}，[router]）;

赞(0）回复(0）举报 2023-09-29

我来回答

javascript 下一篇：JS：Loading Screen While the dom is rendeing

8条答案

相关问题

热门标签

最新问答