SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Detecting Pre-loaded Image Dimensions

    Hello - I'm trying to detect the pixel width and height of an image that has been pre-loaded to the cache, but does not yet exist on the page. Is that possible? Here's a stripped down version of what I'm trying to accomplish, but I'm obviously missing something...
    Code:
    var thisImage = new Image();
    thisImage.src = "wombat.jpg";
    thisImage.onload = MPTest();
    
    function MPTest() {
    	var iWidth = thisImage.width;
    	var iHeight = thisImage.height;
    	document.write("Width = "+iWidth+", Height = "+iHeight);
    	}
    Here's what I'm getting returned...
    Width = 1, Height = 0
    ...but the image dimensions are actually 248w x 149h, so I've obviously done something horribly wrong. Thanks in advance for any advice.
    Nate Baldwin
    mindpalette.com

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nate Baldwin....you've done something horribly wrong. Horribly, horribly wrong. It's horrible, just....horrible. (will you shut up)

    OK, back in control again. See this:

    thisImage.onload = MPTest();

    The name of your handler function is MPTest (it's a global function, so it's actually stored as window.MPTest). The parentheses are more than just a place to store arguments - they're a flag ('operator pair') that says "run me". So instead of the function being assigned to run when the event fires, it's run immediately, and the return value is assigned. Horrible. Try this:

    thisImage.onload = MPTest;

    Now you've set a pointer. Better.

    Could also just go:

    thisImage.onload = function() {
    var iWidth = thisImage.width;
    var iHeight = thisImage.height;
    document.write("Width = "+iWidth+", Height = "+iHeight);
    }

    ...assigning an anonymous ('lambda') function directly. Always set the handler before the .src. Cached images load quickly.

    That could be horrible.

    http://www.xs4all.nl/~ppk/js/events_tradmod.html

    ....btw great site!
    Last edited by adios; Jun 7, 2003 at 11:43.
    ::: certified wild guess :::

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, geez, I went and threw the parenthesis in there again - that's an old error I used to make that comes back to bite me again every once in a while... anyway, here's what I currently have...
    Code:
    var thisImage = new Image();
    
    thisImage.onload = function() { 
    	var iWidth = thisImage.width; 
    	var iHeight = thisImage.height; 
    	document.write("Width = "+iWidth+", Height = "+iHeight); 
    	}
    
    thisImage.src = "wombat.jpg";
    ...and getting the same results - in Explorer (5.2) it's just returning the width as 1 and height as 0, which isn't right. Netscape (7) does give me the correct height and width, but the "loading" never stops - the ol' wheel keeps spinning for some reason. Could the thisImage.onload be throwing it into some abominable loop?

    Anyway, it's one of those things where it has to work in all the major browsers or not at all. See anything else I'm doing horribly wrong?
    Nate Baldwin
    mindpalette.com

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    alert("Width = "+iWidth+", Height = "+iHeight);

    Calling document.write() from an event handler - horrible, horrible.

    Let me say it again: nice site.
    ::: certified wild guess :::

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the site compliments :-)

    I just slapped my own hand for you, so I've been rebuked sufficiently (I think). Not that it was going to be there for the "real" script, but... (I just slapped my hand again for offering lame excuses).

    Still, I'm getting the wrong results in IE (5.2, Mac). Just a browser bug, do you supposed? Or is there a way around it? Just for reference, here's what I have at this point...
    Code:
    var thisImage = new Image();
    
    thisImage.onload = function() { 
    	var iWidth = thisImage.width;
    	var iHeight = thisImage.height;
    	alert("Width = "+iWidth+", Height = "+iHeight); 
    	}
    
    thisImage.src = "wombat.jpg";
    Nate Baldwin
    mindpalette.com

  6. #6
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works for me (XP/IE6.0). You graphics guys and your Macs...not much to go wrong here so, baffled am I.

    Anyhow, I know for a fact that your wombat is 248 x 149. Case dismissed.
    ::: certified wild guess :::

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    Anyhow, I know for a fact that your wombat is 248 x 149. Case dismissed.
    Well that's what's important, I guess

    I'll do some fishing around for a work-around (for now I'll pretend that there is a work-around), since a good percentage of the people who'd be using what I'd be ultimately making are going to be on Macs using IE... thanks for your kindly efforts, rebukeful though it was...
    Nate Baldwin
    mindpalette.com

  8. #8
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Nate,

    Here's a script that I wrote which pertains to what you want to do, I think...hopefully this will help:
    Code:
    <html>
    <head>
    <title>Find the size of your image!</title>
    <Script language="JavaScript">
    <!-- Written by: Greg Cook -->
    <!-- Website: http://www.html4me.com -->
    <!-- Email: host@html4me.com -->
    function showImage()
    {
    var the_image = document.getElementById("image1" );
    the_image.src=""window.document.form1.textbox1.value;
    var imgWidth = parseInt(the_image.width);
    var imgHeight = parseInt(the_image.height);
    window.document.form1.imgW.value = imgWidth+" px";
    window.document.form1.imgH.value = imgHeight+" px";
    }
    function resetScript(form)
    {
    document.images[0].src="";
    form.imgW.value='';
    form.imgH.value='';
    }
    </script>
    </head>
    <BODY>
    <form name="form1">
    Image: >> <input type="file" name="textbox1">
    <BR><BR><input type="button" value="Show Image" OnClick="showImage()"> <input type="button" value="Reset" OnClick="resetScript(this.form)"><BR><BR>
    <img id='image1'><BR><BR>
    Width: <input type="text" name="imgW" size="7"><BR>
    Height: <input type="text" name="imgH" size="7">
    </form>
    </body>
    </html>


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
  •