2011-07-03

The Exact Way to get Width and Height of Dynamic Loaded Image

Views: 20546 | 5 Comments

There are certain wrong ways using JavaScript/jQuery to get the width/height of dynamic loaded image. Here are some reasons why your codes won’t work:

  • You codes run before the image is downloaded from web server,
  • even if you use jQuery to bind a “load” event handler on that image, your codes won’t work when the image is loaded from browser cache(jQuery bug).

Let me show you the WRONG ways:

(WRONG)get width/height after setting html content

var html = '<img src="URL" />;
$('#my_div').html(html);
var width = $('#my_div img').width(); // may return 0

(WRONG)get width/height in “load” event handler

var html = '<img src="URL" />';
var img = $(html);
html.load(function(){
    // return 0 if image is loaded from browser cache
    var width = img.width();
});
$('#my_div').html(img);

And now, comes the right way…

The Exact way

// step 1: display the image
var img = '<img src="http://image.jpg" />';
$('#my_div').html(img);

// step 2: get image's width
var ni = new Image();
ni.onload = function(){
    var width = ni.width;
}
ni.src = 'http://image.jpg';
Posted by ideawu at 2011-07-03 22:22:53 Tags: , ,

5 Responses to "The Exact Way to get Width and Height of Dynamic Loaded Image"

Leave a Comment