在显示HTML5之前加载内容

我在互联网上开发杂志，我想知道是否可以在实际显示内容之前将所有内容（图像，视频，DOM）加载到就绪状态。加载时，进度条将显示内容加载的进度。非常感谢你！在显示HTML5之前加载内容

2012-01-23 AJ Naidas

有类似：

<body> 
    <div id="allcontent" style="display:none;"> 
      <!-- your entire page --> 
    </div> 
    <div id="progressbar">...</div> 
</body>

然后

$(window).load(function() { 
    $('#progressbar').remove(); 
    $('#allcontent').show(); 
});

编辑：你可以通过计算$('img')数，然后在每个计算已加载图像的比例模拟进展$('img').load事件。这不是完美的，但总比没有好

2012-01-23 10:35:44 ori

当javascript不可用时，这将使内容无法访问 – fcalderan

然后将它隐藏在'$（document）.ready'上，而不是在HTML中。（它会闪烁？） – ori

这就是@AJ奈达斯想要的。 –

我建议一个类似样板的解决方案，使用适用于<html>元素的特定类。看我的例子小提琴：http://jsfiddle.net/tKtYd/

这个想法是通过JavaScript应用类waitpageloadbeforedisplay很快在head，然后在CSS中使用这个类来隐藏主站点包装。然后等待窗口load事件删除该类并显示您的网站内容。即使JavaScript不可用/禁用，内容仍然可以访问。

使用css规则.waitpageloadbeforedisplay body（因此您不需要使用标记进行样式设计），装载程序显示为正文背景。

2012-01-23 10:45:47 fcalderan

回答