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

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Reveller
    #1

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

    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).rea dy(function(){
    $("img.caption" ).each(function (i) {
    var img_width = $(this).width() ;
    var img_title = $(this).attr('t itle');
    var img_align = $(this).attr('a lign');
    $(this).wrap("< div class=\"image-caption-container\"
    style=\"float:" + img_align + "\"></div>");
    $(this).parent( ).width(img_wid th);
    $(this).parent( ).append("<div class=\"image-caption\">" +
    img_title + "</div>");
    });
    });
    </script>
    </head>
    <body>
    <img src="logo.gif" class="caption" title="scriptin g like a rockstar">
    </body>
    </html>
    Tags: None
    • Ben Amada
      #2
      Re: [jQuery] Why does img_width always return 0 (zero)?

      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).

        Comment

        • SAM
          #3
          Re: [jQuery] Why does img_width always return 0 (zero)?

          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.imag es[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).rea dy is supposed to mean ?

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

            Comment

            • Ben Amada
              #4
              Re: [jQuery] Why does img_width always return 0 (zero)?

              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.

                Comment

                Previous template Next
                Working...