如何確保網頁或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的順序有關（最有可能）。