电脑技术学习

关于chrome,firefox中img.width=0,img.height=0的解决方法

dn001

今天修改网站的上传头像时,谷歌浏览器中放大缩小图片,图像消失的bug。

调试时发现动态处理图片时有问题:

[javascript]view plaincopy
  1. varimg;=;newImage();;;;
  2. img.src;=;$("#xxx").attr("src");;;
  3. var_width;=;img.width;;;
  4. var_height;=;img.height;;;
  5. img;=;null

_width=0,_height=0

上网搜了下,发现是图片未加载完造成的。

解决方法:

[javascript]view plaincopy
  1. functionloadImage(url,;callback);{;;
  2. varimg;=;newImage();;//创建一个Image对象,实现图片的预下载
  3. img.src;=;url;;;
  4. if(img.complete);{;//;如果图片已经存在于浏览器缓存,直接调用回调函数
  5. callback.call(img);;;
  6. return//;直接返回,不用再处理onload事件
  7. };;
  8. img.onload;=;function();{;//图片下载完毕时异步调用callback函数。
  9. callback.call(img);//将回调函数的this替换为Image对象
  10. };;
  11. } ;

标签: