这是一个来自谷歌Adsense应用页面的例子。加载界面显示在主界面之前。
我不知道如何用React做同样的事情，因为如果我用React组件渲染加载屏幕，它不会在页面加载时显示，因为它必须等待DOM渲染之前。
更新:
我通过将屏幕加载器放在index.html中并在React componentDidMount()生命周期方法中删除它来举例说明我的方法。
示例和反应加载屏幕。
当前回答
在公用文件夹中编辑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替换。
其他回答
我使用的是react-progress-2 npm包，它是零依赖的，在ReactJS中工作得很好。
https://github.com/milworm/react-progress-2
安装:
NPM安装react-progress-2
在项目中包含react-progress-2/main.css。
导入“node_modules / react-progress-2 / main.css”;
包括react-progress-2，并把它放在顶部组件的某个地方，例如:
import React from "react";
import Progress from "react-progress-2";
var Layout = React.createClass({
render: function() {
return (
<div className="layout">
<Progress.Component/>
{/* other components go here*/}
</div>
);
}
});
现在，无论何时你需要显示一个指示器，只需调用Progress.show()，例如:
loadFeed: function() {
Progress.show();
// do your ajax thing.
},
onLoadFeedCallback: function() {
Progress.hide();
// render feed.
}
请注意，show和hide调用是堆叠的，因此在n个连续的show调用之后，您需要执行n个hide调用来隐藏一个指示器，或者您可以使用Progress.hideAll()。
当你的React应用程序是巨大的，它真的需要时间来启动和运行后，页面已经加载。比如，你将应用的React部分挂载到#app上。通常，index.html中的这个元素只是一个空的div:
<div id="app"></div>
你可以做的是放一些样式和一堆图像，让它在页面加载和初始React应用程序渲染到DOM之间看起来更好:
<div id="app">
<div class="logo">
<img src="/my/cool/examplelogo.svg" />
</div>
<div class="preload-title">
Hold on, it's loading!
</div>
</div>
页面加载后，用户将立即看到index.html的原始内容。不久之后，当React准备好将呈现的组件的整个层次结构挂载到这个DOM节点时，用户将看到实际的应用程序。
注意class，而不是className。这是因为你需要把它放到html文件中。
如果你使用SSR，事情就不那么复杂了，因为用户会在页面加载后立即看到真正的应用程序。
这可以通过在html文件(例如index.html)中放置加载图标来实现，这样用户就可以在html文件加载后立即看到图标。
当你的应用程序完成加载时，你可以简单地删除生命周期钩子中的加载图标，我通常在componentDidMount中这样做。
The starting of react app is based on the main bundle download. React app only starts after the main bundle being downloaded in the browser. This is even true in case of lazy loading architecture. But the fact is we cannot exactly state the name of any bundles. Because webpack will add a hash value at the end of each bundle at the time when you run 'npm run build' command. Of course we can avoid that by changing hash settings, but it will seriously affect the cache data problem in the Browser. Browsers might not take the new version because of the same bundle name. . we need a webpack + js + CSS approach to handle this situation.
更改public/index.html如下所示
<!DOCTYPE html> <html lang="en" xml:lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=3.0, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <!-- manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <style> .percentage { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; border: 1px solid #ccc; background-color: #f3f3f3; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1.1em solid rgba(0, 0, 0, 0.2); border-radius: 50%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .innerpercentage { font-size: 20px; } </style> <script> function showPercentage(value) { document.getElementById('percentage').innerHTML = (value * 100).toFixed() + "%"; } var req = new XMLHttpRequest(); req.addEventListener("progress", function (event) { if (event.lengthComputable) { var percentComplete = event.loaded / event.total; showPercentage(percentComplete) // ... } else { document.getElementById('percentage').innerHTML = "Loading.."; } }, false); // load responseText into a new script element req.addEventListener("load", function (event) { var e = event.target; var s = document.createElement("script"); s.innerHTML = e.responseText; document.documentElement.appendChild(s); document.getElementById('parentDiv').style.display = 'none'; }, false); var bundleName = "<%= htmlWebpackPlugin.files.chunks.main.entry %>"; req.open("GET", bundleName); req.send(); </script> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>App Name</title> <link href="<%= htmlWebpackPlugin.files.chunks.main.css[0] %>" rel="stylesheet"> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="parentDiv" class="percentage"> <div id="percentage" class="innerpercentage">loading</div> </div> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html>
在你的webpack产品配置中，将HtmlWebpackPlugin选项改为如下
new HtmlWebpackPlugin({
inject: false,
...
您可能需要使用'eject'命令来获取配置文件。最新的webpack可能有选项配置HtmlWebpackPlugin而不弹出项目。
这将发生在ReactDOM.render()控制根目录<div>之前。也就是说，你的应用程序到那时还没有被安装。
所以你可以把你的加载器添加到index.html文件的根目录<div>。在React接管之前，这将在屏幕上可见。
您可以使用任何最适合您的加载器元素(例如带有动画的svg)。
您不需要在任何生命周期方法上删除它。React会用你渲染的<App/>替换它的根<div>的所有子元素，就像我们在下面的动图中看到的那样。
关于CodeSandbox的例子
index . html
<head>
<style>
.svgLoader {
animation: spin 0.5s linear infinite;
margin: auto;
}
.divLoader {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="root">
<div class="divLoader">
<svg class="svgLoader" viewBox="0 0 1024 1024" width="10em" height="10em">
<path fill="lightblue"
d="PATH FOR THE LOADER ICON"
/>
</svg>
</div>
</div>
</body>
index.js
在ReactDOM.render()运行之前，使用调试器检查页面。
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
debugger; // TO INSPECT THE PAGE BEFORE 1ST RENDER
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
推荐文章
- 如何配置历史记录?
- 如何在Redux应用程序中动态加载代码分割的减速器?
- React钩子:从回调中访问最新状态
- 同步和异步编程(在node.js中)的区别是什么?
- React-Native:应用程序未注册错误
- ReactJS和公共文件夹中的图像
- React: 'Redirect'没有从' React -router-dom'中导出
- 如何在React中使用钩子强制组件重新渲染?
- React组件中使用TypeScript的默认属性值
- 反应钩子-正确的方式清除超时和间隔
- 在React.js中正确的img路径
- 在React.js中更新组件onScroll的样式
- onClick ReactJS调用多个函数
- 为什么React 16中的Fragments比容器div更好?
- 在Redux应用程序中哪里写localStorage ?
