反应-显示加载屏幕，而DOM是渲染?

这是一个来自谷歌Adsense应用页面的例子。加载界面显示在主界面之前。

我不知道如何用React做同样的事情，因为如果我用React组件渲染加载屏幕，它不会在页面加载时显示，因为它必须等待DOM渲染之前。

更新:

我通过将屏幕加载器放在index.html中并在React componentDidMount()生命周期方法中删除它来举例说明我的方法。

示例和反应加载屏幕。

当前回答

这个问题可以通过React的lazy特性轻松解决。

import { Suspense, lazy } from "react"
import Loading from "components/Loading"

const Dashboard = lazy(() => import("containers/Dashboard"))

const App = () => (
  <Suspense fallback={<Loading />}>
    <Dashboard />
  </Suspense>
)

export default App

当仪表板组件仍在加载时，加载组件将显示出来。

2021-10-01 09:28:41

其他回答

在公用文件夹中编辑index.html文件的位置。复制你的图像到相同的位置index.html在公共文件夹。然后将index.html中包含<div id="root"> </div>标签的部分内容替换为下面给定的html代码。

<div id="root">  <img src="logo-dark300w.png" alt="Spideren" style="vertical-align: middle; position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -100px; /* Half the height */
   margin-left: -250px; /* Half the width */" />  </div>

在加载过程中，Logo现在将出现在页面中间。并将在几秒钟后被React替换。

2019-02-12 10:02:57

我也在我的应用程序中使用React。对于请求，我使用axios拦截器，所以让加载器屏幕的好方法(fullpage，因为你展示了一个例子)是在拦截器内部添加类或id为例(这里的代码来自官方文档，一些自定义代码):

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
     document.body.classList.add('custom-loader');
     return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
       document.body.classList.remove('custom-loader');
       return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

然后在CSS中使用伪元素实现你的加载器(或添加类或id到不同的元素，而不是你喜欢的body) -你可以设置背景的颜色为不透明或透明，等等…例子:

custom-loader:before {
    background: #000000;
    content: "";
    position: fixed;
    ...
}

custom-loader:after {
    background: #000000;
    content: "Loading content...";
    position: fixed;
    color: white;
    ...
}

2018-12-21 09:41:28

我还使用了@Ori Drori的答案，并设法让它起作用。随着React代码的增长，客户端浏览器在第一次访问时必须下载的编译包也会增加。如果你处理不好，这会带来用户体验问题。

我添加到@Ori回答是添加和执行onload函数在index.html的onload属性的主体标签，以便加载器消失后，一切都已完全加载在浏览，见下面的代码片段:

<html>
  <head>
     <style>
       .loader:empty {
          position: absolute;
          top: calc(50% - 4em);
          left: calc(50% - 4em);
          width: 6em;
          height: 6em;
          border: 1.1em solid rgba(0, 0, 0, 0.2);
          border-left: 1.1em solid #000000;
          border-radius: 50%;
          animation: load8 1.1s infinite linear;
        }
        @keyframes load8 {
          0% {
           transform: rotate(0deg);
          }
          100% {
           transform: rotate(360deg);
          }
        }
     </style>
     <script>
       function onLoad() {
         var loader = document.getElementById("cpay_loader");loader.className = "";}
     </script>
   </head>
   <body onload="onLoad();">
     more html here.....
   </body>
</html>

2020-02-17 06:30:48

那么使用速度呢?

使用这里的链接地址。

https://github.hubspot.com/pace/docs/welcome/

1.在他们的网站上选择你想要的样式并粘贴在index.css中

2.复制Pace Js的链接并添加到public/index.html中的脚本标签中

3.它会自动检测网页负载，并在浏览器顶部显示速度。

你也可以在css中修改高度和动画。

2020-04-09 09:13:12

在componentDidMount中设置超时工作，但在我的应用程序中，我收到了内存泄漏警告。试试这样的方法。

constructor(props) {
    super(props)
    this.state = { 
      loading: true,
    }
  }
  componentDidMount() {
    this.timerHandle = setTimeout(() => this.setState({ loading: false }), 3500); 
  }

  componentWillUnmount(){
    if (this.timerHandle) {
      clearTimeout(this.timerHandle);
      this.timerHandle = 0;
    }
  }

2018-07-23 00:30:40

反应-显示加载屏幕，而DOM是渲染?

推荐文章

最新文章

标签