js实现页面加载的等待效果

最新推荐文章于 2026-05-01 05:36:50 发布

转载最新推荐文章于 2026-05-01 05:36:50 发布 · 5.8w 阅读

标签

#js

收录于

web开发专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一种在网页加载过程中显示等待提示的方法。通过在页面上覆盖一层包含加载提示信息的遮罩，当页面加载完成后自动隐藏该层，从而提供良好的用户体验。文中提供了具体的HTML和JavaScript代码示例。

页面实现加载时的等待效果

原理是在需要等待的页面区域加一个层先覆盖加载中的页面,等待数据加载完成后把层隐藏掉

<div id="ld" style="position:absolute; left:-1px; top:1px; width:100%; height:100%; background-color:#FFFFFF; z-index:1000;">
<div id="center" style="position:absolute;">
<table border="0">
<tr><td><span id="disp">页面加载中,请等待...</span></td></tr>
<tr><td><img src="/common/image/2.gif"></td></tr>
</table>
</div>
</div>

<script language="JavaScript">
function winload(){
ld.style.display="none";
f8=true;
}
</script>

<div onload="winload();">

有些时候页面加载时间很短,就看不到等待的效果,可以把onload函数改成下面的,就可以看到效果了

<script language="JavaScript">
function winload(){
setTimeout(
function(){
alert("111111");
ld.style.display="none";
f8=true;
},1000);

}
</script>

div部分的代码写在<head>之后