Jquery偶尔会在图像上返回零高度和宽度

Question

I am observing an unusual behavior. I have a floating dialogue box in which I am placing an image. I want to get the image size using jquery and resize its div container to the appropriate size. It works fairly well, but the function occasionally returns zeros as the image sizes.

$('#dialogueContainer').html('<div class="dialogue"><img src="/photos/' + file + '" id="lightImage" /></div>');

var imageHeight = $('#lightImage').height();
var imageWidth = $('#lightImage').width();

console.log(imageHeight + 'x' + imageWidth); //<-- This occasionally returns "0x0"

I suspect that the image may not be ready in the DOM when jquery attempts to measure its height and width. Any thoughts?

Answer 1

You can bind a load event handler to the element before adding it to the DOM, to get the width/height once it's available. You can also explicitely set the width/height of the image using CSS or inline attributes.

//create an img element, passing attribute values as we do, then bind an event handler to the `load` event for the image
var $img = $('<img />', { src : '/photos/' + file, id : 'lightImage' }).on('load', function () {

    //now that the image has loaded we can be sure the height/width values we receive are accurate
    var imageHeight = $(this).height(),
        imageWidth  = $(this).width();

    console.log(imageHeight + 'x' + imageWidth);
});

//now change the HTML of the container, emptying the container, then appending a div element with the `dialogue` class which also has a child img element (our image from above)
$('#dialogueContainer').html($('<div />', { class : 'dialogue' }).html($img));

I like to bind the load event handler to the element before adding it to the DOM or changing it's source, this way you know the load event is in place when the image actually loads (which can happen quickly from cache).

Note that .on() is new in jQuery 1.7 and in this case replaces .bind() (of earlier versions).

Update

I would like to stress the fact that if you know the dimensions of your image you should explicitly declare them (this is best practice for faster browser rendering):

<img width="100px" height="200px" src="..." />

Answer 2

You're right, the image is not loaded.

Worst, in IE, sometimes the size reported is something like 40x60 (the small icon you see when the image is not loaded yet).

jQuery reports that the load event can be used with images: http://api.jquery.com/load-event/

I tried a long time ago to solve this problem, cross browser, and I ended up polling the image sizes to trigger a custom "load" event.

Thanks

Answer 3

I had this problem trying to get the height of a <div> containing paragraphs and it wasn't because the content hadn't loaded - I tried alerting the height of it on a click so I could be sure it was there 1st and was still getting 0 returned. It turned out to be a css issue I added a clear class to it using the clear hack:

.clear { display:inline-block; }   
.clear:after, .container:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html .clear { height:1%; }
.clear { display:block; }

And that fixed it right up.

Answer 4

I believe you are right. Try logging the image's width and height once the image has loaded:

var $img = $('<img />');

$img.load(function(){
  var imageHeight = $('#lightImage').height();
  var imageWidth = $('#lightImage').width();

  console.log(imageHeight + 'x' + imageWidth);  
});

$img.attr('src', '/photos/' + file);

Notice I've set src after binding the event handler to the image. Otherwise, I had unpredictable results, depending on the browser.

Answer 5

Is the image ever hidden, either with display: none or visibility: hidden ? Invisible elements return a width and height of 0.