js图片预处理及onload事件

js的onload事件是当下载完对象后触发的,由此我们可以根据这一特性做些图片预处理.

 

< img src = " http://t5.baidu.com/it/u=2344735094,3718634490&gp=4.jpg "  id = " abc " >
< div id = " bbb " > 图片加载... </ div >
< script language = " javascript " >
var  a = new  Image();
a.onload = function  () ... {bbb.innerHTML="";abc.src=a.src} ;
a.src = " http://rwbz.kutu365.com/80/pics/20071231448274278.jpg " ;



</ script >

 先显示小图片,再显示大图片.

 

< html >  
< head >  
< title > IE图片预加载类 </ title >  
< script  language ="javascript" > ...  
function LoadImageClass() 
...{ 
    var me = this; 
    var a = [];    //图片数组 
    this.Idx = 0;    //已经被加载的图片个数 
    this.Num = 0;    //图片总数 

    //下载图片 
    this.LoadImages = function(s) 
    ...{ 
        a = s.split(","); 
        this.Num = a.length; 
        DownImg(); 
    } 

    function DownImg() 
    ...{ 
        var i=new Image(); 
        var f = true; 
        i.onload= function() 
        ...{ 
            if (f) 
            ...{ 
                f = false 
                me.Idx++; 
                if (me.LoadIng) me.LoadIng(); 
                if (me.Idx<me.Num) DownImg(); 
                else if(me.CallBack) me.CallBack(a); 
            } 
        } 
        i.src = a[me.Idx]; 
    } 
} 
</ script >  
</ head >  
< body >  
< div  id ="counter"  style ="position:absolute; z-index:98; left:expression(document.body.clientWidth/2-60); top:expression(document.body.clientHeight/2-10); width:120px; height:20px; background:#000000; color:#ffffff;" > 图片加载中... </ div >  
< div  id ="divPageMask"  style ="position:absolute; z-index:99; left:0px; top:0px; width:expression(document.body.clientWidth); height:expression(document.body.clientHeight); background:black; filter:alpha(opacity=50);" ></ div >  
< div  id ="box" ></ div >  

< script  language ="javascript" > ...  
    var o = document.getElementById("counter"); 
    var t=new LoadImageClass(); 
    t.LoadIng = function() ...{ o.innerHTML="加载进度："+Math.floor(t.Idx/t.Num*100)+"%" }; 
    t.CallBack = function(arr) 
    ...{ 
        window.setTimeout(function()...{o.style.display='none';alert('图片加载完毕！')},1000); 
        document.getElementById('divPageMask').style.display='none'; 
        var str=""; 
        for(var i=0;i<arr.length;i++) 
        ...{ 
            str+='<img src="'+arr[i]+'" />'; 
        } 
        document.getElementById("box").innerHTML=str; 
    } 
    t.LoadImages('http://www.baidu.com/img/logo-yy.gif,http://bbs.51js.com/images/default/logo.gif,http://www.programbbs.com/bbs/uploadFace/46_2006910934216927.gif,http://photo.hjbbs.com/photo/20060531/20060531103027226_756_o.jpg,http://img1.soufun.com/bbs/2007_02/13/1171345302199.jpeg,http://img.c8c8.cn/2006/09/09/15032/pp20060909002749.jpg'); 
</ script >  
</ body >  
</ html >

该文章转载自脚本之家：http://www.jb51.net/html/200705/23/9812.htm

多图片加载,这里的递归写的不错.