[jQuery] Why does img_width always return 0 (zero)?

R

Reveller

I'm rewriting my own js library to jquery functions. A huge undertaking,
but hopefully worth it in the future :) Question: why does the script
always return 0 for img_width? Logo.gif exists and moving the code to
the end of the page (before the closing body-tag) doesn't help either.
Any help would be greatly appreciated!

<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script>
$(document).ready(function(){
$("img.caption").each(function(i) {
var img_width = $(this).width();
var img_title = $(this).attr('title');
var img_align = $(this).attr('align');
$(this).wrap("<div class=\"image-caption-container\"
style=\"float:" + img_align + "\"></div>");
$(this).parent().width(img_width);
$(this).parent().append("<div class=\"image-caption\">" +
img_title + "</div>");
});
});
</script>
</head>
<body>
<img src="logo.gif" class="caption" title="scripting like a rockstar">
</body>
</html>
 
B

Ben Amada

Reveller said:
Question: why does the script always return 0 for img_width? Logo.gif
exists and moving the code to the end of the page (before the closing
body-tag) doesn't help either.

The ready() function is firing before the image has loaded. It's not
possible to know the image dimensions until the image has loaded. I tested
your code, and the first time through, I get an invalid width of 24 in
Firefox and 28 in IE (probably the default widths the browsers use until the
images have been loaded). Running the page again, because the image is
cached from the first time, the image is already loaded when the code runs.
I then get a correct img_width (460 pixels in my case).
 
S

SAM

Le 11/15/08 3:06 PM, Reveller a écrit :
I'm rewriting my own js library to jquery functions. A huge undertaking,
but hopefully worth it in the future :) Question: why does the script
always return 0 for img_width? Logo.gif exists and moving the code to
the end of the page (before the closing body-tag) doesn't help either.
Any help would be greatly appreciated!

and what gives the button :

<button onclick="alert('img width = '+document.images[0].width);">
width ? </button>


Strange ... this code works on reload :-(
It's like the image seems to be put in cache and jquery lost it,
getting it back when refreshing the file.

What $(document).ready is supposed to mean ?
 
B

Ben Amada

Ben said:
The ready() function is firing before the image has loaded. It's not
possible to know the image dimensions until the image has loaded.

BTW, your code seems to work if you run the code when the document has
loaded via the body's onload event, rather than using jQuery's document
ready() function.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top