By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,364 Members | 1,596 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,364 IT Pros & Developers. It's quick & easy.

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

P: n/a
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>
Nov 15 '08 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Reveller wrote:
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).

Nov 15 '08 #2

P: n/a
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 ?

<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>
Nov 15 '08 #3

P: n/a
Ben Amada wrote:
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.

Nov 16 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.