kylin

醉里论道,醒时折花。

kylin

img的onload与complete

今天遇到了一个奇怪的bug
需要将图片裁剪至合适的大小,然后我这样一个方法

1
2
3
4
5
var x = 65;
if(width>height)
$(this).css("height",x);
else
$(this).css("width",x);

由于各种原因<img>元素是通过字符串在js里面拼接出来的,上面那个方法用在append到界面上之后
刚做完的时候貌似没有问题,但是多刷新几次之后,神奇的事情发生了,这个方法居然时灵时不灵!

后来通过研究发现,这个方法应该在图片加载完之后调用。
下面是改良之后的方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
(function ($) {
function autoSize(obj, w, h, is_cut) { //is=true 不移位
var oIMG = new Image();
oIMG.onload = function () {
var oW = this.width;
var oH = this.height;
if (is_cut && w == h) {
if (oW > oH) {
obj.style.height = w + 'px';
}
else {
obj.style.width = w + 'px';
}
}
};
oIMG.src = obj.src;
}
$.fn.autoSize = function (width, height, is_cut) {
this.each(function (i) {
$(this).load(function () {
return autoSize(this, width, height, is_move, is_cut);
});
});
return this;
};
})(jQuery);

定义了图片的onload事件,在图片加载完之后执行。

这里需要注意一个细节
不要把oIMG.src=obj.src;这一句紧跟在var oIMG = new Image();之后。

除了这个方法之外,还可以使用图片的complete 属性,如用以下方法获取图片的尺寸

1
2
3
4
5
6
7
8
9
10
11
12
var imgLoad = function (url) {
var img = new Image();
img.src = url;
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
img.onload = null;
};
};
};