SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    857
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get Image Width - FireFox 2.0 Bug

    By default FireFox 2.0 ++ is not working with the following image width javascript. It prints a value of "0" instead of "75" in the example below. It works fine in IE or FireFox 1.0. Any ideas?

    Code JavaScript:
    <script>
    // Image is 75px wide
    var url = 'http://www.sitepoint.com/forums/image.php?u=52542&dateline=1108372778';
     
    var img = document.createElement('img');
    img.setAttribute('src', url);
     
    // This works and prints the width "75" but not in FireFox 2.0- it prints "0"
    document.write(img.width);
    </script>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Get it out of the head section and into the body.

  3. #3
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    857
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your hlep pmw57, its not in the head. its in the body

    Open this with IE then FF. Different results in FF.
    http://psylicyde.com/test.htm

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Somehow on my Firefox 2.0 it's printing out 75.
    I don't think that I myself can help any further with this.

  5. #5
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    857
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you on MAC?

    Every PC computer in my office running FireFox 2.0 + is showing an error "0" instead of "75"

    Can anyone help with this weird compatibility issue?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    I'm on a PC too.

    Further testing shows that a forced refresh (shift + refresh) of the page results in it showing 0, whereas a normal refresh keeps it at 75. Now that I can duplicate the problem (always very important) it can be worked out.

    A first line of reasoning is that the normal refresh has cached the image. The reason why it's showing 0 is that the image hasn't loaded yet, so it can't get a width.

    The solution, make the image width test a part of the onload process.

    It's also possible to dynamically check img.complete which will be true when the image has loaded.

    Anyway, the following script works when you use onload="processImage()"

    Code JavaScript:
    // Image is 75px wide
    var url = 'http://www.sitepoint.com/forums/image.php?u=52542&dateline=1108372778';
    var img = document.createElement('img');
    img.setAttribute('id', 'testImage');
    img.setAttribute('src', url);
     
    function processImage() {
      // This works and prints the width "75" but not in FireFox 2.0- it prints "0"
      alert(img.width);
    }

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You should wait for the onload event of the image to fire before doing anything with it. Also, you should try not to have javascript in the body. You can just as easily do this with your javascript in the <head>.
    Code Javascript:
    function imageCreate() = {
      var url = 'http://www.sitepoint.com/forums/image.php?u=52542&dateline=1108372778';
      var img = document.createElement('img');
      img.onload = function() {
        alert(img.width);
        document.body.appendChild(img);
      }
      img.setAttribute('src', url);
    }
     
    window.onload = imageCreate;
    When the document has finished loading (including all images), the imageCreate function gets going. An image is created and its url specified. When it has been downloaded by the browser, the image's onload event fires and the width is alerted and it is appended to the BODY.

  8. #8
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use naturalWidth for firefox.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    I found that even naturalWidth doesn't return a value if you're asking for it before the image has finished loading.

  10. #10
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    I found that even naturalWidth doesn't return a value if you're asking for it before the image has finished loading.
    Yeah, thats why its used to detect if the user has images turned off or not.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •