页面加载的进度条显示

最新推荐文章于 2022-09-29 19:15:35 发布

原创最新推荐文章于 2022-09-29 19:15:35 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#border #javascript #table #function #class #div

技术专栏收录该内容

6 篇文章

订阅专栏

博客介绍了页面加载进度条的显示方法，在<Head>标签中加入特定的<div>和<table>代码来展示进度条界面，同时使用JavaScript的window.onload函数，在页面加载完成后隐藏进度条。

页面加载的进度条显示

在<Head>标签中加入下面代码即可

<div id="Loading" style="Z-INDEX:1; LEFT:0px; WIDTH:100%; POSITION:absolute; TOP:0px; HEIGHT:100%; BACKGROUND-COLOR:#f2f8ff">
   <table width="100%" height="100%" border="0" cellpadding="5" cellspacing="0" ID="Table1">
    <tr>
     <td align="center"><img src="../images/crystalStyle/common/loading_title.gif" width="154" height="50"><br>
      <br>
      <span class="fontDGTitle">请稍等，正在加载......</span><br>
      <br>
      <img src="../images/crystalStyle/common/loading.gif" width="200" height="3" border="1"></td>
    </tr>
   </table>
  </div>
  <script language="javascript" type="text/javascript">
function window.onload()
{
document.all.Loading.style.display="none";
}
  </script>