我有一个单页webapp,大约300Kb.它与webpack捆绑在一起并使用React / Redux. 在页面加载之前,如何预先放置一个小的加载微调器？我可以成像 将样式和CSS放入静态index.html 使用像krux/postscribe这样
在页面加载之前,如何预先放置一个小的加载微调器？我可以成像
>将样式和CSS放入静态index.html
>使用像krux/postscribe这样的异步加载器
例如
<!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之后,它将在内容中呈现,加载动画将消失.
编辑：
另一种方法是使用渐进式webapp.
https://developers.google.com/web/updates/2015/10/splashscreen
但是,此功能可能仅在现代浏览器中可用,这就是为什么第一种方法应该用作回退方法的原因.然而,好处是,如果您的应用程序处于离线状态,它仍会播放加载动画并可以给出特定的错误消息.