Testing for image presence

Discussion in 'Javascript' started by Rick, Sep 14, 2006.

  1. Rick

    Rick Guest

    I consider myself a pretty good javascript coder, but I'm far from guru
    status and would appreciate feedback from some more experienced people.
    I came up with this idea for conditionally outputting an image based on
    whether it is available or not (code below) and tested it. It appears
    to work, but I'm concerned that there may be something fundamentally
    flawed in this as I've never seen this done before nor have any of my
    Google seraches turned up anyone recommending anything like this.

    So, any feedback about this would be appreciated.

    In the test below, "testimage.gif" does not exist, but testimage2.jpg
    does exist. When you run this, it outputs the default.jpg instead of
    testimage.gif and testimage2.jpg shows up as expected.

    -------------------

    <html>

    <head><title>test</title>

    <script languge="javascript">

    myImage = new Image();
    myImage.src = "testimage.gif"; // this does not exist
    myImage2 = new Image();
    myImage2.src = "testimage2.jpg"; // this does exist

    </script>

    </head>

    <body>

    myImage<br>

    <script language="javascript">
    if ( (myImage.complete) && (myImage.height) && (myImage.width) )
    {
    document.write("<img src=\""+myImage.src+"\">");
    }
    else
    {
    document.write("<img src=\"default.jpg\">");
    }
    </script>

    <br><br><br>

    myImage2<br>

    <script language="javascript">

    if ( (myImage2.complete) && (myImage2.height) && (myImage2.width) )
    {
    document.write("<img src=\""+myImage2.src+"\">");
    }
    else
    {
    document.write("<img src=\"default.jpg\">");
    }
    </script>



    </body>

    </html>

    -------------------
    Rick, Sep 14, 2006
    #1
    1. Advertising

  2. Rick

    Randy Webb Guest

    Rick said the following on 9/14/2006 3:19 AM:
    > I consider myself a pretty good javascript coder, but I'm far from guru
    > status and would appreciate feedback from some more experienced people.
    > I came up with this idea for conditionally outputting an image based on
    > whether it is available or not (code below) and tested it. It appears
    > to work, but I'm concerned that there may be something fundamentally
    > flawed in this as I've never seen this done before nor have any of my
    > Google seraches turned up anyone recommending anything like this.
    >
    > So, any feedback about this would be appreciated.


    Upload all your files to a server and re-test it. You will get different
    results.

    > In the test below, "testimage.gif" does not exist, but testimage2.jpg
    > does exist. When you run this, it outputs the default.jpg instead of
    > testimage.gif and testimage2.jpg shows up as expected.


    Only because the time it takes to parse the page is longer than the time
    it takes the browser to get the image.

    > -------------------
    >
    > <html>
    >
    > <head><title>test</title>
    >
    > <script languge="javascript">
    >
    > myImage = new Image();
    > myImage.src = "testimage.gif"; // this does not exist
    > myImage2 = new Image();
    > myImage2.src = "testimage2.jpg"; // this does exist
    >
    > </script>
    >
    > </head>
    >
    > <body>
    >
    > myImage<br>
    >
    > <script language="javascript">
    > if ( (myImage.complete) && (myImage.height) && (myImage.width) )
    > {
    > document.write("<img src=\""+myImage.src+"\">");
    > }
    > else
    > {
    > document.write("<img src=\"default.jpg\">");
    > }
    > </script>


    You could put both of those script blocks into one and the effects are
    easier to see. You will run into timing issues. If you want to ensure an
    image is available then look into the onload event handler of the image
    element and the onerror event handler.

    <img src="someImage.jpg" onerror="this.src='someOtherImage.jpg'">

    And you will still run into the potential problem of someOtherImage.jpg
    not being available.

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Sep 14, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. a_srivathsan
    Replies:
    2
    Views:
    3,404
    a_srivathsan
    Sep 8, 2004
  2. |{evin

    MSN Presence info?

    |{evin, Jan 27, 2004, in forum: ASP .Net
    Replies:
    6
    Views:
    408
    |{evin
    Jan 28, 2004
  3. Madhusudan Singh

    Testing for presence of arguments

    Madhusudan Singh, Aug 17, 2005, in forum: Python
    Replies:
    13
    Views:
    459
    Madhusudan Singh
    Aug 18, 2005
  4. Will McDonald
    Replies:
    7
    Views:
    293
    Thomas Bellman
    Jan 24, 2006
  5. Replies:
    1
    Views:
    275
    Trevor Hennion
    Feb 2, 2008
Loading...

Share This Page