Question

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

Answer 1

有类似的东西：

<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事件中已加载图片的百分比。它并不完美，但总比没有好

Answer 2

我建议使用类似于样板的解决方案，使用应用于<html>元素的特定类。请参阅我的示例小提琴：http://jsfiddle.net/tKtYd/

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

使用css规则.waitpageloadbeforedisplay body将加载程序显示为正文背景（因此您无需使用标记进行样式设置）。