如何预加载文档并仅在浏览器完成从服务器加载数据时在屏幕上显示它

将所有内容设置为display:none;，直到jQuery AJAX success()方法触发，然后可以将display属性设置为正常

另外，确保AJAX代码位于window.onload或$(window).on('load')处理程序内部。

这样做的缺点是，如果Ajax调用不成功，您的页面将无法显示，因此您还应该在jQuery中定义Ajax error()方法。

显示加载完成的图片(放在onload之外):

$('img').each(function()
{
    $(this).css('display','none');
    $(this).on('load',function(){$(this).css('display','');});
});

此外，您还需要显示某种类型的加载符号以改善用户体验。

你可以试着用覆盖来隐藏页面，就像这个插件

快速和容易。

使用@timss的答案试试这个:

设置正文为visibility: hidden

jQuery(window).load(function () {
            $("body").css({"visibility":"visible"});
});

找到此来源:优先加载网页中的内容他声称在显示之前会预加载整个页面。

<script language="javascript" type="text/javascript">
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
function loadImages() {
if (document.getElementById) {  // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
}
window.onload = loadImages;
//  End -->
</script>
<div id="hidepage" style=" background-color: #FFFFCC; layer-background-color: #FFFFCC;     width: 100%;">
<table width=100%><tr><td>Page loading ... Please wait.</td></tr></table></div>

我的解决方案:

这是如何做的一个粗略的草案，但如果你最终确定它就可以了。优先考虑所有内容加载的顺序。使用onload jsHide函数

<DIV ID="idElement2"><IMG SRC="Airplane.gif">         onLoad="javascript:jsHide('idElement2');return true"></DIV>

<DIV ID="idElement5"><IMG SRC="stuff.gif"      onLoad="javascript:jsShow('idElement5');jsShow('idElement3');jsShow('idElement4');return true"></DIV>

设置idelement5为最后加载，加载后将显示所有其他元素的id

window.onload = function () { 
    alert("Page loaded!") 
}