js进度条实时显示页面加载进度

发布时间:2020-11-27编辑:脚本学堂
本文介绍了js进度条的一个例子,用js进度条显示页面加载进度,例子很小却很实用,有研究js如何实现进度条的朋友,不妨做个参考。

例子,javascript 实现页面加载进度条的代码。
 

复制代码 代码示例:
<!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>js进度条-实时显示页面加载进度-www.jb200.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript"><!--
document.write('<div id="loadbox"><span>加载中,请耐心等待</span><img src="20100411182122592.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>语句百分网,www.yuju100.com!</h1>
<img src="/20140411182122712.jpg" width="500" height="413" />
<img src="/20140411182123800.jpg" width="800" height="600" />
</div>
</BODY>
</html>