javascript实现页面加载进度条

最新推荐文章于 2023-11-09 11:24:12 发布

转载最新推荐文章于 2023-11-09 11:24:12 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cnfiowen/archive/2009/07/09/1520064.html

文章标签：

#javascript #xhtml #ViewUI

这是一个包含两张图片的页面，一张展示了欧文的肖像，另一张是欧文在比赛中的画面，页面在加载时会显示一个加载动画，加载完成后将显示图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
  <TITLE> New Document </TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <script type="text/javascript">
    document.write('<div id="loadbox"><span>加载中，请耐心等待</span><img src="http://www.funly.cn/img/load.gif" width="160" height="20" /></div>');
    window.onload = function ()   {
        document.getElementById('loadbox').style.display="none";
        document.getElementById('imglist').style.display="block";
    }
</script>
<style type="text/css">
body {background-color:#000;}
#imglist { display:none;color:#FFFFFF;}
#loadbox { width:160px;height:60px; position:absolute;top:50%;left:50%;margin-left:-80px;margin-top:-30px;}
#loadbox span {height:30px;display:block;width:160px;text-align:center; color:#FFF; font-size:12px;}
</style>
</HEAD>

<BODY>
  <div id="imglist">
        <h1>欧文加油！</h1>
        <img src="http://ii.a.5d6d.com/userdirs/e/6/realmadrid/attachments/month_0907/09070408514f0af09934c90548.jpg" width="500" height="413" />
        <img src="http://www.insun.com.cn/pu/Picture/star/om_m/554798pic321-com-13.jpg" width="800" height="600" />
    </div>
</BODY>
</html>

转载于:https://www.cnblogs.com/cnfiowen/archive/2009/07/09/1520064.html