<img id="img1" mysrc="http://pic002.cnblogs.com/images/2012/319713/2012103021492628.jpg" width="200" height="248" src="img/tran.gif" style="background:url(img/loading.gif) no-repeat center #CCC;" /> <img id="img2" mysrc="http://pic002.cnblogs.com/images/2012/319713/2012103021500686.jpg" width="200" height="248" src="img/tran.gif" style="background:url(img/loading.gif) no-repeat center #CCC;"/> <img id="img3" mysrc="http://pic002.cnblogs.com/images/2012/319713/2012103021504340.jpg" width="200" height="248" src="img/tran.gif" style="background:url(img/loading.gif) no-repeat center #CCC;"/> <script type="text/javascript"> var Forimgload = function(opat){ this.opat = opat; } Forimgload.prototype = { loadimgs:function(){ //多张图的加载 var _this = this, _imgurl = _this.opat.imgurl, _callback = _this.opat.callback, _pand = [], _imgload = _this.imgload; for(var i=0,j=_imgurl.length;i<j;i++){ _imgload(_imgurl[i],function(){ _pand.push(1); }); } setTimeout(function(){ if(_pand.length<j){ setTimeout(arguments.callee,0); return; } _callback(); _pand = null; _callback = null; },0) }, loadimg:function(){ //单张图的加载 var _this = this, _url = _this.opat.imgurl, _callback = _this.opat.callback, _imgload = _this.imgload; _imgload(_url,_callback); }, oneload:function(url,callback){ var _this = this; if(!_this.oneimg) _this.oneimg = new Image(); var _other = new Image(); var _one = _this.oneimg; _one.src = url; _other.src = url; if(_other.complete == false){ _one.onload = function(){ callback(); } }else{ callback(); } console.log("loadind"); }, imgload:function(url,callback){ //主加载函数 var _img = new Image(); _img.src = url; if(_img.complete == false){ _img.onload = function(){ callback(); callback = null; }; }else{ callback(); } } } /*new Forimgload({ imgurl:["http://pic002.cnblogs.com/images/2012/319713/2012103021492628.jpg","http://pic002.cnblogs.com/images/2012/319713/2012103021492628.jpg"], callback:function(){ alert("完成") } }).loadimgs(); */ /*var imgs = document.getElementsByTagName("img"); var arri for(var i=0,j=imgs.length;i<j;i++){ new Forimgload({ imgurl:imgs[i].src, callback:function(){ console.log("1"); } }).loadimg(); } */ var but = document.getElementsByTagName("img"); var d = new Forimgload(); for(var i=0,j=but.length;i<j;i++){ but[i].onclick = function(){ var _src = this.getAttribute("mysrc"); var _this = this; d.oneload(_src,function(){ alert(1); _this.src = _src; }); } } </script>