JQuery获取动态加载的图片大小的正确方法

原文http://www.vipaq.com/Detail/view/item/211.html

有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:你的代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.

jQuery load()事件处理的BUG, 当图片是从浏览器缓存取得时, 获取的是错误的尺寸.

错误的代码是:
(错误)在添加了HTML之后立即调用代码获取尺寸

1

var html = '';

2

$('#my_div').html(html);

3

var width = $('#my_div img').width(); // 可能返回0

(错误)用jQuery的load()事件处理

1

var html = '';

2

var img = $(html);

3

html.load(function(){

4

    var width = img.width(); // 如果读取浏览器缓存则返回0

5
});

6

$('#my_div').html(img);

下面这种才是真正正确的方法, 使用JavaScript的Image类:

正确的方法:

1

var html = '';

2

$('#my_div').html(html);

3

var ni = new Image();

4

ni.onload = function(){

5

    var width = ni.width;

6
}

7
ni.src = img.attr(URL);