二楼的方法不是常规的解决办法，个人感觉不是很好(不过他实现的加载进度是真实的，他的进度条是可以反映当前未加载页面的剩余内容的---其实这种方法也挺好....不过一般情况下没什么必要吧，如果要做成这样的，用flex更好)。
一楼的方法不是正确的。如果简单地放一个loading图片在页面上的话，会有两种悄则情况：一、有可能实现加载的效果 。 二、在整个页面其它元素加载了大部分或全部后，这张图片才加载进来，那就实现不了加载的效果了。
呵呵，一个加载的问题要考虑搜索的话原来就这么麻烦了。 <div id="forspider">.....给搜索蜘蛛看的纯HTML....</div>这里启链棚面的内容是整个实际页面的HTML吗？是的话，那这个loading页面本身加载就很笨重了，还不如直接跳到真实页面呢。 哎唤早，可惜我不太懂搜索，悲剧。请指教----为什么要用绝对定位覆盖的方法来隐藏。直接把这一层display:none的话蜘蛛也会看不到吗？
代码是这笑液乎样的：loading page:<body> <img id='loadingImg' src='loading.gif' /><body<script $.ajax({ type: 'GET', url: 实际页面路径, data: {} success: function() $('body').append(data) $('#loadingImg').hide();//或直接remove() }, dataType: 'html' });</script>
刚好我做了一个, 可以任意定制
/* HTML */
<div id="progressbar"></div>
/* CSS */
#progressbar {
background:#82b3f4 url(../images/bar.png) repeat-x left top;
height:25px;
width:1px;
border:1px solid #6d98ca;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:white;
overflow:hidden;
text-indent:10px;
line-height:25px;
font-size:12px;
}
/* js / jquery*/
function progress(t0,t1){
if(t0<=t1){
var barwidth=Math.round(t0/t1*100)+"%";
$('#progressbar').css("width",barwidth).html(barwidth);
if(t0==t1){$('#progressbar').delay(1000).fadeOut();}
}
}
//以下是测缓念试函数, 执行 test(0) 就可以看到效果
function test(i){
i++;
if(i<=100){
progress(i,100);
var str="test("+i+")";
var t=setTimeout(str,500);
}
}
说明: 加载的过程中调用progress(), t0是当前进度, t1是总进度. 如果是页面加载的话用有onload事件的HTML标签如<img>, <iframe>, <body>等等汪消来调用progress()
如果你用CSS3结合IE的CSS滤镜来做连图片都可以免了
=============================
感谢楼下说出了我忘记说的重点. 没错, 关键在于AJAX. 我是在做后台生成页面的部分连续用到几个ajax, 然后用这个方法表示网页生成进度的.
但前台网页还是用这个方法的话就会有问题. 相当严重的问题. 搜索蜘蛛是看不到你用ajax加载的内容的
当然, 也有不需要被搜索引擎收录的情况.....
如果是前台的话,我想这样写可以解决
<body>
<div id="forspider">.....给搜索蜘蛛看的纯HTML....</div>
<div id="loadingbox"><div id="progressbar"></div></div> //加载进度条, 用绝对定位把这一层盖满全屏, 让人看不到下面的东西
<div id="main"></div> //真正给人看的内容, 通过ajax加载到这个层里. 加载完成后remove掉 <div id="forspider">和<div id="loadingbox">
</body>
就困哪知看楼主能不能理解了.....
很简单，就两步。
1.把Loading进度条的GIF图片放到div内，并设置好位置及内容等等的CSS样式。（不要隐藏哦，页面在加载时就做宏者会显示）
2.在JQuery的$函数中放这代码就行了， $(".Loading").hide();//隐藏class="Loading"的对象，如绝谨下：
<div class="Loading"></div>
你可用GIF图片作为div的背景，也纯薯可把GIF图片直接放在<div class="Loading">图片</div>中。