DOM加载进度条

Question

我在加载整个页面之前使用带有加载条图像的简单叠加层。

这是我的代码：

<div id="loadingOverlay">
     <img src="loading.gif" alt="Loading bar" />
</div>

jQuery：

$(window).load(function(){
    $('#loadingOverlay').fadeOut();
});

它有效，但我想要一个真正的加载栏，在页面加载时填充。

我想我必须找到页面的重量，然后很多字节的计算已经“下载”，但我不知道如何检查，特别是使用jQuery。 / p>

也许我会使问题复杂化，但是有办法吗？

另外，我发现这个JS Bin似乎有效，但它专注于图像，我只想在整个页面及其内容上做到这一点。