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 ...