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';