真正的 用JS 做的 loading

转载 2004年07月01日 10:44:00
标题     真正的 用JS 做的 loading    oicqkill(原作)
关键字     loading JS javascript frame 控制

这个loading 需要2个页面的的支持,还可以为一个站点的所有html设置这个loading程序
<!--=================================-->
<!-- index.htm--->
<!--=================================-->
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>您正在访问 http://m9m.nease.net/ 的网站......</title>
</head>
<frameset rows="0,*" name=frm border=0>
  <frame src=about:about name=t  border=0>
  <frame src=loading.htm name=d border=0>
</frameset>
<noframes><body>
您的浏览器不支持frames......
</body></noframes></html>

<!--=================================-->
<!-- loading.htm--->
<!--=================================-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT src=to.js>
</SCRIPT>
<body>
<SCRIPT>
showdiv();
 wturl("i.html"); // 您的网站的真正 index.htm
</SCRIPT></body></html>

<!--=================================-->
<!-- to.js -->
<!--=================================-->
document.write('<STYLE type="text/css">.btn {BORDER-RIGHT: #c0c0c0 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #c0c0c0 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #c0c0c0 1px solid; CURSOR: default; COLOR: #000000; PADDING-TOP: 1px; BORDER-BOTTOM: #c0c0c0 1px solid; BACKGROUND-COLOR: #c0c0c0}/
.btu { BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 1px; FLOAT: none; PADDING-BOTTOM: 1px; BORDER-LEFT: #ffffff 1px solid; CURSOR: default; COLOR: #000000; PADDING-TOP: 1px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #c0c0c0}</STYLE>');

function WriteButton(fnFunctionName, ButtonValue, ButtonURL, wd)
{
    var strTmp = "",n = 0;
    if (fnFunctionName == "")
    strTmp = "self.location = '" + ButtonURL + "';";
 else
    strTmp = fnFunctionName + '();';
 for(var i = 0; i < ButtonValue.length; i++)
 {
   var c = ButtonValue.substr(i, 1);
   if( c > "z" || c < "A")
       n += 2;
   else
       n += 1;
 }
 if( wd == "") wd = (n * 8);

 document.write("<table title="+ButtonURL+" width=" + wd + "><tr><TD align=center class=btn onmouseup=/"javascript:this.className='btu'/" onmousedown=/"javascript:this.className='btd'/" onmouseover=/"javascript:this.className='btu'/" style=/"FONT-SIZE:12px;TEXT-DECORATION:none/" onclick=/"javascript:this.className='btd';" + strTmp + "/" onmouseout=/"javascript:this.className='btn'/">" + ButtonValue + "</TD></tr></table>");
}

function wtdiv()
{
  document.write("<div id=stdiv style='position:absolute; width:350px; height:115px; z-index:1; left: 30%; top: 35%;visibility: hidden;'><table width=100% height=100%  border=1 bordercolor=#000000 bordercolordark=#ffffff cellspacing=0 cellpadding=0><tr><td height=22 bgcolor=#bbbbbb><SCRIPT>WriteButton(/"/", /"欢迎您<span id=ipn></span>访问我的计算机..../", /"http://m9m.nease.net/", /"100%/");</SCRIPT></td></tr><tr><td align=center bgcolor=#CCCCCC><br>系统正在运行中,请耐心等待.<br>等待时间:<font color=red><span id=wtime></span></font>秒</td></tr></table></div>");
}
wtdiv();

function openwin()
{
    if(self == window.parent.frames['t'] && top.parent.frm)
 top.parent.frm.rows = '*,0';
    else if(top.parent.frm) top.parent.frm.rows = '0,*';
}

var wt = 0, n = 0;
function countwt()
{
   if (wt)
     clearTimeout(wt);
   wtime.innerHTML = "" + n++ ;
   wt = setTimeout("countwt();", 1000);
}


function showdiv()
{
        openwin();
 document.getElementById("stdiv").style.visibility = "visible";
        countwt();
}
openwin();

<!--=================================-->
<!--       h.js -->
<!--=================================-->
if(self != window.parent.frames['t'] && window.parent.frames['t'])
    window.parent.frames['t'].showdiv();
else if(self == window.parent.frames['d'] && window.parent.frames['d'])
    window.parent.frames['d'].showdiv();

最后的说明
在您的i.htm,也就是您的真正的index.htm首页里加入如下代码就可以
<body>后加
<script src=h.js></SCRIPT>
</body>前加入
<script src=to.js></SCRIPT>
就可以了

不明白的可以访问我的网站 http://m9m.nease.net/ 或 来信和我交流
QQ: 11602011


10分钟,利用canvas画一个小的loading界面(顺便讨论下绘制效率问题)

首先利用定义下canvas得样式 你的游览器不支持canvas  这里主要要说的就是宽高,不要在style里面定义,不然会被拉伸。(对于这点,建议大家看下W3c文档,不是很懂) 高度和宽...
  • qazwsx2345
  • qazwsx2345
  • 2014年07月15日 12:19
  • 1277

JS实现页面加载完毕之前loading提示效果

一、JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, ...
  • haibo0668
  • haibo0668
  • 2016年10月28日 12:04
  • 20964

js获取页面加载过程做一个简单的loading

前几天写了一个简单的,还是觉得改善一下 document.onreadystatechange = loadingChange;//当页面加载状态改变的时候执行这个方法. func...
  • u011108439
  • u011108439
  • 2016年03月29日 18:25
  • 3306

Loading.js加载框架

/** * 脚本名称:页面加载Loading脚本 * 脚本说明: * 1.因为使用到document.body.scrollHeight对象,脚本引入时,脚本应放到body内,否则报...
  • dong_18383219470
  • dong_18383219470
  • 2016年11月16日 21:54
  • 822

不用gif图,用js+css实现loading效果

要理解loading的原理,即在文档加载完成之前显示loading效果,隐藏主文档内容,而在文档加载完成之后,隐藏loading效果,显示主文档内容。 loading的简...
  • bboyjoe
  • bboyjoe
  • 2016年03月22日 17:36
  • 1510

页面Loading js插件

当做Web移动端页面时,由于不同的手机设备联网速度不同,页面加载时最好做一个loading效果,增强用户体验,以下插件可以实现一个简单的loading效果: /** * 脚本名称:页面加载Loa...
  • a497785609
  • a497785609
  • 2015年09月15日 18:04
  • 4570

js ajax提交后按钮显示loading简单效果

js ajax提交后按钮显示loading简单效果
  • aa1049372051
  • aa1049372051
  • 2016年09月22日 10:41
  • 2386

JS实现页面加载完毕之前loading提示效果

做成js调用: base-loading.js代码 [html] view plain copy   /...
  • u012028371
  • u012028371
  • 2017年02月16日 20:11
  • 3865

ArcGIS For JavaScript API Show loading ico/text(加载时显示图标/文本)————(十一)

一、 描述: 此示例演示了如何使用动画图像显示的地图正在加载。图像是一个小的GIF动画。图像出现在地图第一次加载和用户缩放或平移时已加载,所有图层加载完毕的图像消失。 在线演示:http://he...
  • xiaokui_wingfly
  • xiaokui_wingfly
  • 2013年01月09日 15:50
  • 2671

使用$http发送请求的时候显示loading

由于是单页应用, 所以在index.html中必有这样一行:在这一行下面添加以下代码: ...
  • Excaliburace
  • Excaliburace
  • 2017年05月31日 09:05
  • 544
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:真正的 用JS 做的 loading
举报原因:
原因补充:

(最多只允许输入30个字)