Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2010
    Location
    Seattle
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Get image width in FireFox at onload

    Hi CF,

    I'm a graphic/designer and occasional Actionscript developer making what's turning out to be a rather clumsy transition into Javascript. Be gentle.

    I'm trying to create a script that will load an external image and test whether it's in my document's "tall" or "wide" formats before placing it in the page.

    This is easy in IE just using imageObject.width, but Firefox seems to always return a value of 0, no matter what I do (this includes using imageObject.naturalWidth).

    Refreshing the page suddenly causes the wide mode to activate, but any time before the image is actually placed in the document, FF just won't read the width.

    I've tried maybe a dozen different scripts, but here's my most recent:
    Code:
    function testImage(){
    	if (defaultImage.naturalWidth > 320){
    		wideMode = true;
    	} 
    	placeImage();
    }
    
    function loadFirstImage(){
    	defaultImage.src = "images/myGIF.gif";
    	defaultImage.onLoad = testImage();
    }
    Any ideas on how to accurately get an image object's width after loading, but before placing it on the page?

    Any help is much appreciated.

    Thanks,
    ~gyz

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    I have to assume that defaultImage is a correct reference to an Image object that you've created elsewhere. It must not be the ID of an <img> tag.

    Try this edit and note all the differences:
    Code:
    function testImage()
    {
     wideMode =  (defaultImage.width > 320);
     
     placeImage();
    }
    
    function loadFirstImage()
    {
     defaultImage.onload = testImage; /*Install before specifying src*/
    
     defaultImage.src = "images/myGIF.gif";
    }
    Last edited by Arty Effem; 08-25-2010 at 09:24 PM.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    He said "before placing it [the image] on the page", so I'm guessing that he has done
    Code:
    var defaultImage = new Image();
    But that still should work on most browsers.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    A slightly more elegant solution that doesn't depend on the variable defaultImage being accessible to the testImage function:
    Code:
    function testImage()
    {
        wideMode =  this.width > 320;
        placeImage();
    }
    
    function loadFirstImage()
    {
        defaultImage.onload = testImage; /*Install before specifying src*/
        defaultImage.src = "images/myGIF.gif";
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Aug 2010
    Location
    Seattle
    Posts
    56
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Arty, that sure seems to work.

    My problem now is that it appears to cause some sort of conflict in the page's existing script (my script will eventually be an external .js embedded in a page generated by a third-party application).

    But, well, that's a different problem that's probably a little complicated to go into here (unless you can think of why placing my .js source at the top of the head might prevent any other content from loading).

    =========
    Actually, I just ran a test with both wide and tall modes wherein the only other content on the page is
    Code:
    <body>
    <input type="button" value="Back" onclick="location.href='testWide.html'" />
    </body>
    The button doesn't even get loaded in FF, and in IE, navigating between the two pages linked by the button (identical, ecept one triggers tall mode and the other triggers wide) causes the subsequent page not to load at all; the browser just hangs.

    The problem could be squirreled away somewhere in the rest of my code, but didn't cause a problem until this latest fix. Any ideas?

    Thanks again for the help!
    ~gyz


  •  

    Posting Permissions

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