<html> <head> <style> #console_div{position:fixed;right:20px;top:5px;width:200px;height:150px;overflow:auto;border:1px solid green;} </style> </head> <body> <div><button id="loadbt" type="button" value="">加载</button></div> <div id="div" style="display:none;"> <div>通过头信息获取图片信息...<span id="readyTime">加载中...</span></div> <div>width:<span id="d2"></span></div> <div>height:<span id="d4"></span></div> <div>加载完毕获取图片信息...<span id="loadTime">加载中...</span></div> <div>width:<span id="d1"></span></div> <div>height:<span id="d3"></span></div> </div> <img id="image"/> <div id="console_div"></div> <script> var div_console=$('console_div'); if(!window.console){ window.console={}; console.log=function(v,k){ var temp=createNode('p'); var temp_span=createNode('span'); temp.style.cssText='color:blue;'; temp_span.cssText='color:red;'; temp_span.appendChild(createTextNode(k+':')); temp.appendChild(temp_span); temp.appendChild(createTextNode(v)); div_console.appendChild(temp); }; }else{ div_console.innerHTML='浏览器支持console对象，请启用dubug模式进行查看输出信息'; } function createNode(type){ return document.createElement(type); } function createTextNode(v){ return document.createTextNode(v); } var loadImage=(function (){ var list=[]; var internalWatchImage; var timer=function(){ for(var i in list){ if(list.hasOwnProperty(i)&&i!=='prototype'){ list[i]&&!list[i].end&&list[i](); } } }; var stop=function(){ clearInterval(internalWatchImage); }; return function(src,ready,load,error){ var width,height; var img=new Image(); src+='?time='+new Date().getTime(); img.src=src; $('image').src=src; if(img.complete){ callback.call(img); return; } width=img.width; height=img.height; img.onload=function(){ load.call(img); !onready.end&&onready(); img=img.onload=img.onerror=null; }; img.onerror=function(){ error.call(img); onready.end=true; img=img.onload=img.onerror=null }; var onready=function(){ var newWeight=img.width; var newHeight=img.height; console.log($('image').width,'width'); console.log($('image').height,'height'); if(newWeight!=width||newHeight!=height){ ready.call(image); onready.end=true; stop(); } width=img.width; height=img.height; } list.push(onready); if(internalWatchImage==null){ internalWatchImage=setInterval(timer,40); } }; }()); function $(v){return document.getElementById(v);} window.onload=function(){//file:///C:/Users/SKing/Desktop/a.html $('loadbt').onclick=function(){ var Timer=function(){this.startTime=new Date().getTime();} Timer.prototype.stop=function(){return new Date().getTime()-this.startTime;} var time=new Timer(); $('div').style.display='block'; loadImage( 'http://www.planeart.cn/demo/imgReady/vistas24.jpg', function(){ $('readyTime').innerHTML='总共耗时:'+time.stop()/1000+'s'; $('d2').innerHTML=this.width; $('d4').innerHTML=this.height; },function(){ $('loadTime').innerHTML='总共耗时:'+time.stop()/1000+'s'; $('d1').innerHTML=this.width; $('d3').innerHTML=this.height; },function(){ $('div').innerHTML='出错'; }); }; } </script> </body> </html>
posted on 2012-03-22 22:22 G.N&K 阅读(282) 评论(0) 编辑 收藏 举报
Powered by: 博客园 Copyright © 2024 G.N&K Powered by .NET 8.0 on Kubernetes
