ImgLoad 特效

<Script Language="JavaScript">
<!--
var LoadImgSrc = "http://yisge.116.tofor.com/images/loading.gif" ; //加载图片显示的图片URL
function getOS() {
if(navigator.userAgent.indexOf("MSIE")>0) {
  return "MSIE" ;
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0) {
  return "FireFox" ;
}
}
function getImgObj() {
var ImgObj = document.getElementById("Main") ; //DIV层的ID,如果想把整个HTML页的图片全部加上特效,可把这句改成"var ImgObj = document.body ;"(一般不需要).
return ImgObj.getElementsByTagName("Img") ;
}
function StartLoadImg() {
if(getOS() != "MSIE") {
  document.getElementById("ImgLoadBar").innerHTML = "<Table Border=0><Tr><Td>Images Loading</Td><Td>0.00%</Td></Tr></Table>" ;
} else {
  document.getElementById("ImgLoadBar").innerHTML = "<Table Border=0><Tr><Td>Images Are Loading...</Td></Tr></Table>" ;
}
var Pic = getImgObj() ;
var Pics = Pic.length ;
for(var i = 0 ; i < Pics ; i++) {
  var PicURL = Pic[i].src ;
  Pic[i].src = LoadImgSrc ;
  Pic[i].onload = setTimeout("LoadImg(" + i + ",/"" + PicURL + "/")",600) ; //Loading图片加载的时候多长时间后开始加载原来的图片,设置这个目的是为了把Loading的图片显示出来.否则的话,Loading的图片无法显示出来便开始加载原来的图片了.1000为1秒.
}
}
function LoadImg(ImgN,ImgURL) {
var Pic = getImgObj() ;
var Pics = Pic.length ;
Pic[ImgN].src = ImgURL ;
Pic[ImgN].onload = function() {
  HasLoad(0); //可恶的IE不支持onload后直接调用函数,只能先接个无名函数,里面再调用别的函数了.
}
}
function HasLoad(XX) {
if(getOS() != "MSIE") {
  PicN -- ;
  var Pics = getImgObj().length ;
  document.getElementById("ImgLoadBar").innerHTML = "<Table Border=0><Tr><Td>Images Loading</Td><Td>" + (((Pics - PicN)/Pics)*100).toFixed(2) + "%</Td></Tr></Table>" ;
} else {
  document.getElementById("ImgLoadBar").innerHTML = "<Table Border=0><Tr><Td>Images Load Ok</Td></Tr></Table>" ;
  setTimeout("document.getElementById(/"ImgLoadBar/").innerHTML = /"/"",2000) ; //加载完成后"Images Load Ok"信息停留的时间,1000为1秒.
}
if(PicN == 0) {
  document.getElementById("ImgLoadBar").innerHTML = "<Table Border=0><Tr><Td>Images Load Ok</Td></Tr></Table>" ;
  setTimeout("document.getElementById(/"ImgLoadBar/").innerHTML = /"/"",2000) ; //加载完成后"Images Load Ok"信息停留的时间,1000为1秒.
}
}
//-->
</Script>
<!--上面的JS代码可以封包在.JS文件中调用-->
<Span ID="ImgLoadBar"></Span><Br><!--这个是显示加载信息的,自己选择放置的位置-->
<Div ID="Main"><!--ID名称需和JS中获取的ID一致-->
<Img Src="http://yisge.116.tofor.com/images/yisge.gif"><br>
<Img Src="http://yisge.116.tofor.com/images/baby.gif"><br>
<Img Src="http://yisge.116.tofor.com/images/bkg2.gif"><br>
<Img Src="http://yisge.116.tofor.com/images/body.gif"><br>
<Img Src="http://yisge.116.tofor.com/images/hsqq.gif"><br>
<Img Src="http://yisge.116.tofor.com/images/logo.gif"><br>
<Img Src="http://yisge.116.tofor.com/images/moyu.gif"><br>
<Img Src="http://yisge.116.tofor.com/images/buttom.gif"><br>
<Img Src="http://www.blueidea.com/articleimg/2006/08/3859/01.jpg"><br>
<Img Src="http://www.blueidea.com/articleimg/2006/08/3859/02.jpg"><br>
<Img Src="http://www.blueidea.com/articleimg/2006/08/3859/03.jpg"><br>
<Img Src="http://www.blueidea.com/articleimg/2006/08/3859/04.jpg"><br>
<Img Src="http://www.blueidea.com/articleimg/2006/08/3859/05.jpg"><br>
<Img Src="http://www.blueidea.com/articleimg/2006/08/3859/06.jpg"><br>
<Img Src="http://www.blueidea.com/articleimg/2006/08/3859/07.jpg"><br>
<Img Src="http://www.blueidea.com/articleimg/2006/08/3859/08.jpg"><br>
</Div>
<Script Language="JavaScript">
<!--
var PicN = getImgObj().length ;
StartLoadImg() ;
//-->
</Script><!--这句必须放在DIV层的后面,或者页面的最后面(如果你想把整个HTML页加上特效的话)-->

嘿嘿,终于完成了.
这个特效比较适合一些图片站,特别是加载很多大图片时.

编写时,可恶的IE老是出错,在FF上好好的代码到IE里就不管用了.
所以,那个进度的显示只有FF上可以看到.IE上只有"Images Are Loading"
而且,封包成.JS后,页面首次访问也会出现错误,但不影响功能实现.

尽管不是很完美,但我以后会再修改的.
完美一直是我的追求...

Flying Dream ...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值