gpt4 book ai didi

reactjs - React webpack 包的预加载动画

转载 作者:行者123 更新时间:2023-12-03 13:43:13 25 4
gpt4 key购买 nike

我有一个单页 Web 应用程序,大约有 300Kb 大。它与 webpack 捆绑在一起并使用 React/Redux。

如何在页面加载之前放置一个小的加载旋转器?我可以想象

  • 将样式和CSS放入静态index.html
  • 使用像krux/postscribe这样的异步加载器

最佳答案

一种方法是在index.html中插入加载动画

例如

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="content">
<div id="loader" />
</div>
<script src="build/app.js"></script>
</body>
</html>

然后,在加载bundle.js后,它将在内容中渲染,并且加载动画将消失。

编辑:

另一种方法是使用渐进式 Web 应用程序。 https://developers.google.com/web/updates/2015/10/splashscreen

但是,此功能可能仅在现代浏览器中可用,这就是为什么第一种方法应用作后备方法。但好处是,如果您的应用程序离线,它仍然可以播放加载动画并可以给出具体的错误消息。

关于reactjs - React webpack 包的预加载动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35299620/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com