如何在准备css/jquery之前阻止web内容显示?

如何在准备css/jquery之前阻止web内容显示?,jquery,html,css,Jquery,Html,Css,我有一个巨大的网站(很多图片,很多行javascript,复杂的样式表)。当浏览器加载所有内容时,在加载css/jquery之前,它会显示未设置样式的纯html数据,这看起来不太好 奇怪的是,firefox似乎做得最多。其他浏览器似乎做得很好 我怎么能绕过这个?我考虑用一些css/javascript指令启动索引,这将导致浏览器在内容准备就绪(如何?)之前不显示任何内容(display:none?) 关于如何解决这个问题有什么想法吗?把所有的脚本和样式表放在页眉,不管人们怎么说,总是把JS放在页

我有一个巨大的网站(很多图片,很多行javascript,复杂的样式表)。当浏览器加载所有内容时,在加载css/jquery之前,它会显示未设置样式的纯html数据,这看起来不太好

奇怪的是,firefox似乎做得最多。其他浏览器似乎做得很好

我怎么能绕过这个?我考虑用一些css/javascript指令启动索引,这将导致浏览器在内容准备就绪(如何?)之前不显示任何内容(display:none?)


关于如何解决这个问题有什么想法吗?

把所有的脚本和样式表放在页眉,不管人们怎么说,总是把JS放在页脚,然后施展魔法。

我想你可能想更仔细地看看为什么会出现这个问题,不过,我可以帮你解决它


您可以使用先加载的不同样式表来显示任何或所有DOM元素,然后使用jQuery的加载文档来删除该样式。

在我的例子中。我使用css onload仅在加载css时加载html内容

<!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>
   

函数insertContentAttend(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 els{var el=document.createElement('div');document.body.appendChild(el);/*放在文档末尾*/el.innerHTML=this.responseText;if(s1){eval(document.getElementById(s1.innerHTML);}if(s2){eval(document.getElementById(s2.innerHTML);};};xhr.send();}

您的CSS/Javascript是否在您的头标签中?请按
顺序为您的Javascript尝试requireJS插件如果页面确实很大,在加载所有内容之前不向用户显示任何内容可能会让人们认为页面上没有任何内容。如果你打算这样做,我可能想应用一个加载微调器。@Diodeus:听起来是个好主意,为什么不发布一个解释如何实现的答案呢?看看这是否对你有用,以便于再次删除它。你可能想使用#wrapper(其中#wrapper是你的最高级别dom元素)并对其应用display none。这样用jQuery删除隐藏就更容易了。我以前也这样做过,我选择在页面中加载一个小的“加载”gif,直到加载为止。从用户体验的角度来看,它让用户知道一切都很好。我只是有一个带display none的master div和一个绝对定位到中心的加载gif——根据jQuery,文档被完全加载后,我立即将加载div取出,并使用removeClass()从master div中删除display none