jQuery width() returns 0

Question

I'm writing a jQuery plugin that handles a bunch of image animations with a simple call to the plugin function (something like $("#image1").anims() where #image1 is an image), however as part of the plugin's functionality I use $(this).width() to get the width of the image right at the start of the function call.

But, since the plugin function is called in $(document).ready, it's trying to get the width of the image before the image has loaded, so it's always returning 0. Is there a workaround for this?

Answer 1

You could use a setTimeout() function to delay the execution long enough for the image to load.

Here is an example of how it works:

setTimeout("alert('hello world');", 5000);

The first argument is a string that your javascript engine will parse as executing code and the second argument is an integer value that represents how many milliseconds you wish to delay before the code in your first argument executes.

Answer 2

I believe you can use

$(this).ready()
{
    // stuff with $(this).width() in here
}

I do not think .ready() is exclusive to the document.

Answer 3

By the time $(document).ready is called, the image should already have been loaded. Something else is wrong.

If you need to know the width of the image before you start the animation, but the image needs to be in some form of hidden state when the animation starts, you could capture the image width width .width() before the animation, and call .hide() or whatever else is appropriate, immediately after measuring the width.

Answer 4

The solution on SO.

Answer 5

You could preload the image

var oImage = new Image();

oImage.onload = function(){
    this.width// width of loaded image
}

oImage.src = '/path/to/image.gif';

$(document).ready won't wait for images to load, it waits for the dom to be ready.

Answer 6

http://docs.jquery.com/Events/load

$("#image1").load(function () {
$("#image1").anims();
});

Answer 7

Do a fadeIn before reading any dimensions:

$('#image').fadeIn(10,function () { var tmpW = $(this).width(); var tmpH = $(this).height(); });