如何确保网页或android应用中的所有css和js文件都已加载？

Question

我开发了一个移动应用程序，可加载3个CSS和7个javascript文件。 问题是，如果wifi信号非常慢，则在加载所有JavaScript和样式表之前先加载HTML。 由于未加载样式表，因此HTML看起来受到干扰，并且在几秒钟后（我想在正确加载css和js之后），HTML结构会自动采用正确的格式，但是我不想显示受干扰的格式，因此我需要确保首先加载所有js文件，然后仅显示HTML。

如果您有任何想法如何实现？

Answer 1

您可以使用缓存清单。 阅读以下资源：

• http://appcachefacts.info/
• http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
• https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache

或者，将资源放置在正确的位置（head标签），以确保将资源加载到正文之前。

Answer 2

您应该在标题的顶部链接到网页顶部的外部CSS样式表，如下所示：

<link rel="stylesheet" type="text/css" href="http://whiterootmedia.com/css/example.css" />

或将<style>元素插入标题中。 同样，如果影响您的初始布局，则应对JavaScript执行此操作。 请记住，如果您使用的是外部JS文件，则浏览器将在您的代码中引用外部JavaScript文件的点处停止呈现页面，以加载该外部JavaScript文件。 如果您使用大量的JavaScript，请将其放在页面底部（与大多数人相反）或使用onload()函数。

该网页是从上到下加载的，因此您遇到的问题应与CSS的顺序有关（最有可能）。