首页
关于我们
网站建设
经典案例
网络推广
技术中心
建站指导
联系我们
网站套餐 Package
最新推荐 Recommended  
  您现在的位置: 天诚世纪 >> 技术中心 >> 网页设计 >> 网页技巧 >> 正文
网页加载时显示“页面载入中”的代码
作者:天诚世纪 更新时间:2009-11-6 11:05:46 来源:天诚世纪
    

网页加载时显示“页面载入中”的代码:

第一种:

简单做个界面,页面就显示"页面载入中"几个字.然后在meta部分设置自动刷新,目标就是你实际要显示的页面.

第二种:

< head><style type="text/css"> #loading_container { text-align: center; !important; ; top: 40%; left: 0; width: 100%; z-index: 10001; } #loading { font-family: Tahoma, Helvetica, sans; font-size: 12px; color: #003d88; background-color: #d2e6ff; padding: 10px 0 16px 0; margin: 0 auto; display: block; border: 1px solid #81b9ff; text-align: left; } #loading_bg { background-color: #eff6ff; ; top: 8px; left: 2%; height: 7px; width: 96%; font-size: 1px; } #progress { height: 5px; font-size: 1px; width: 1px; ; top: 1px; left: 0px; background-color: #77A9E0; } </style>< /head>

--------------------------------

<body ><script language="JavaScript" type="text/javascript"> <!-- document.write('<div ><div ><div align="center">页面正在很用力de加载中……<br />欢迎光临泊客Myheimu!<\/div><div ><div > <\/div><\/div><\/div><\/div>'); var t_id = setInterval(animate,20); var pos=0; var dir=4; var len=0; var width = 300;//此处修改loader的宽度,其他内容和动态滑动条会自动适应。 var elem = document.getElementById('progress'); var o = document.getElementById('loader'); o.style.width = Math.floor(width / 0.96) + "px";   function animate() { if(elem != null) { if (pos==0) len += dir; if (len>32 || pos>= width - 32) pos += dir; if (pos >= width - 32) len -= dir; if (pos >= width - 32 && len < = 0) pos=0; elem.style.left = pos + "px"; elem.style.width = len + "px"; } } function remove_loading() { var targelem = document.getElementById('loading_container'); this.clearInterval(t_id); targelem.style.display='none'; targelem.style.visibility='hidden'; } //--> </script></body>

第三种:

放入“载入中”到需要的地方

<span id="load">精彩内容载入中...</span>

-----------------------

<span id="span_load"> <script src="ad.js"></script></span>

<script type="text/javascript">load1.innerHTML=span_load.innerHTML;span_load.innerHTML="";</script>

第四种:

<script>
<!--
document.write(unescape("<div id="wait" style="position:absolute;top:220px;left:220px;padding:6px;"><head><STYLE>.proccess {
    BACKGROUND: #ffffff; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; HEIGHT: 8px; MARGIN: 3px; WIDTH: 8px
}
</STYLE></head>
<div id="submitok"  style="display:yes" style="position: absolute; width: 520; height: 94" style="">
  <div align="center">
  <TABLE height="70%" valign="middle" bgcolor="#FFFFFF" style="color: #000000; " border="0" bordercolor="#000000" cellspacing="0" cellpadding="0">
  <TBODY>
  <TR>
    <TD align=middle><p></p>
         
        <!--  Displaytext-->
        :: 天诚世纪http://www.tc-21.com :: is now loading...
        <P></P>
          <FONT class=fontbig> <img src="shownew.gif" width="30" height="23">数据正在导入..请稍候........

          <!--End Displaytext-->
          <P></P>
          <P></P>
          <P></P>
          <P></P>
          <DIV align=center>
            <FORM method=post name=proccess>
              <SCRIPT language=javascript>
for(i=0;i<30;i++)document.write("<input class=proccess>")
</SCRIPT><SCRIPT language=JavaScript><!--
var p=0,j=0;
var c=new Array("lightskyblue","white")
setInterval('proccess();',100)
function proccess(){
    document.forms.proccess.elements[p].style.background=c[j];
    p+=1;
    if(p==30){p=0;j=1-j;}}
--></SCRIPT>

            </FORM>
          </DIV>
          </font></TD>
      </TR></TBODY></TABLE>
</div>
</div>   </div>"));
//-->
</script>

本文链接:http://www.tc-21.com/ITCenter/200911/20091106110546.html

  • 上一篇文章:
  • 下一篇文章: 没有了
  •   更多关于网页技巧的新闻
      相关文章
    页面载入效果(不是延时的)
    动易CMS在生成百度规范XML地图时出错的解决方法
    用CSS为网页加上水印
    每次刷新后随机显示图片的效果
    简单的图片放大展示效果
    横向不间断的连续滚动图片/文字广告
    仿拍拍paipai.com首页产品图片随机轮显切换效果
    用鼠标滚轮滚动控制图片显示的大小