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

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

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

更新:

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

示例和反应加载屏幕。

当前回答

那么使用速度呢?

使用这里的链接地址。

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

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

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

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

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

2020-04-09 09:13:12

其他回答

这可以通过在html文件(例如index.html)中放置加载图标来实现，这样用户就可以在html文件加载后立即看到图标。

当你的应用程序完成加载时，你可以简单地删除生命周期钩子中的加载图标，我通常在componentDidMount中这样做。

2016-12-06 05:51:59

在公用文件夹中编辑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的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

我还使用了@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

最重要的问题是:“loading”是什么意思?如果你谈论的是被安装的物理元素，这里的一些第一个答案很好。然而，如果你的应用做的第一件事是检查身份验证，你真正加载的是来自后端的数据，用户是否传递了一个cookie，标签他们是授权或未授权的用户。

这是基于redux的，但你可以很容易地将其更改为普通的反应状态模型。

行动的创造者:

export const getTodos = () => {
  return async dispatch => {
    let res;
    try {
      res = await axios.get('/todos/get');

      dispatch({
        type: AUTH,
        auth: true
      });
      dispatch({
        type: GET_TODOS,
        todos: res.data.todos
      });
    } catch (e) {
    } finally {
      dispatch({
        type: LOADING,
        loading: false
      });
    }
  };
};

最后一部分意味着无论用户是否被授权，在收到响应后加载屏幕都会消失。

下面是加载它的组件的样子:

class App extends Component {
  renderLayout() {
    const {
      loading,
      auth,
      username,
      error,
      handleSidebarClick,
      handleCloseModal
    } = this.props;
    if (loading) {
      return <Loading />;
    }
    return (
      ...
    );
  }

  ...

  componentDidMount() {
    this.props.getTodos();
  }

...

  render() {
    return this.renderLayout();
 }

}

如果状态。加载是真实的，我们总是会看到加载屏幕。在componentDidMount上，我们调用getTodos函数，它是一个转换状态的动作创建器。当我们得到一个响应(这可能是一个错误)加载假。我们的组件更新，再次调用渲染，这一次没有加载屏幕，因为if语句。

2019-04-04 16:32:24

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

推荐文章

最新文章

标签