如何在css/jquery准备好之前停止显示web内容？

Question

我有一种巨大的web (很多图片，很多行javascript，复杂的样式表)。当浏览器加载所有内容时，在css/jquery加载之前，它显示的是纯html数据，没有样式，这看起来并不好。

奇怪的是，firefox似乎在这方面做得最多。其他浏览器看起来做得很好。

我怎么才能绕过这个问题呢？我考虑使用一些css/javascript指令启动索引，这将导致浏览器不显示任何内容( display : none?)直到内容准备就绪(如何准备？)。

对如何解决这个问题有什么想法吗？

Answer 1

我认为你可能想要更仔细地了解为什么会发生这个问题，但是，我可以帮助你解决它！

您可以使用先加载的不同样式表显示全部或全部DOM元素，然后使用jQuery的on load of doc删除该样式。

Answer 2

把所有的脚本和样式表放在页眉中，不管人们怎么说总是把JS放在页脚，然后发挥魔力。

Answer 3

就我的情况而言。我使用css onload来加载html内容，只有当css被加载时才加载。

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">      
        function insertContentAtEnd(u, id_script_pre_html, id_script_post_html) {var xhr = new XMLHttpRequest();xhr.open('GET', u, true);xhr.onreadystatechange = function () {if (this.readyState !== 4) {return;}; if (this.status !== 200) { return; } else { var el = document.createElement('div');document.body.appendChild(el); /* to place at end of document*/ el.innerHTML = this.responseText; if(s1){ eval(document.getElementById(s1).innerHTML);}if(s2){ eval(document.getElementById(s2).innerHTML);}  }; }; xhr.send();}
    </script>
    <link rel="stylesheet" href="/inc/css/default.css" onload="insertContentAtEnd('/lay/u/l/default.html','scr_u_l_pre','scr_u_l_post');"/>

</head>
<body></body>
</html>