简单loading的实现问题

首先说一说思路，然后再说遇到的问题。
在要加载的页面上写上一个层作为loading层,样式就不写了

 <div id="loading">
         <img src="photos/1.gif">//loading的动态图
 </div>

这样进入页面后就可以显示loading。
在js中的window.onload事件中将层隐藏，理论上是可以基本实现效果，代码如下：

 $(window).load(function() {
       $("#loading").hide();
  });

下面说问题，因为loading层同样也是一个图片，html图片加载也是无序的,就会出现一种情况，页面加载后其他内容已经开始加载，但是loading的图却还没有被加载，loading的效果就失效了，但是我看其他的网站或者APP，是可以在内容还没加载前，就能够显示loaidng的效果，请问这个是怎么解决呢？？求解

或者说有更好的办法，也可以分享一下......

loading放在最顶层加载，尽量缩小1.gif的体积

你用一定出loading效果，load事件中用计时器延时执行下hide。

如果你加载页面的同时又加载ajax，可以利用ajax的beforeSend 开始加载， Complete() 取消加载
参考网址：http://tanyongbing.iteye.com/blog/1774610
如果只是纯碎的html js css加载的话，可以考虑计时器
也可以考虑这个时间差
$(function(){
// 开始
});

$.document.ready(function(){
//关闭
});