有时候在获取从后台的图片时, 要对图片进行一系列的处理, 才渲染出来
我们要解决的是没有缓存而又快速的相比 onload 更快的方式去获取图片的宽高, 接下来上代码
通过定时循环检测获取:
- // 记录当前时间戳
- var start_time = new Date().getTime()
- // 图片地址 后面加时间戳是为了避免缓存
- var cutSrc = window.ctx + '/touchsys/terminal/showCapture?terminalId=' + terminalId + '×trap=' +
- Math.random();
- // 创建对象
- var img = new Image()
- // 改变图片的 src
- img.src = cutSrc;
- // 定时执行获取宽高
- var check = function(){
- // 只要任何一方大于 0
- // 表示已经服务器已经返回宽高
- if (img.width>0 || img.height>0) {
- var diff = new Date().getTime() - start_time;
- document.body.innerhtml += ' from:check : width:'+img.width+',height:'+img.height+', time:'+diff+'ms';
- clearInterval(set);
- }
- }
- var set = setInterval(check,40)
- // 加载完成获取宽高
- img.onload = function(){
- var diff = new Date().getTime() - start_time;
- document.body.innerHTML += 'from:onload : width:'+img.width+',height:'+img.height+', time:'+diff+'ms';
- // 在里面在做一些我们想处理的逻辑
- };
来源: http://www.bubuko.com/infodetail-2671346.html