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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    .src property not changing onerror

    I've hit a real problem and just can't figure it out. Appreciate any comments

    1. I want to load an image in an image object using the .src property.
    2. If that image does not exist, I want to replace it with a known good one.

    The code below emulates my more complicated script and behaves with exactly the same problem. It tries to load ="./images/wrong.gif", which does not exist and the onerror event handler therefore tries to load "./images/blankimage.gif", which does exist.

    The problem is that the browser only ever tries to render ./images/wrong.gif, EVEN THOUGH I KNOW each of the event handlers have fired because of the alerts - once for onerror trying to load ./images/wrong.gif and once for onload trying to successfully load./images/blankimage.gif


    Code:
    <SCRIPT type="text/javascript" language="javascript">
    var tester=new Image();
    var bimage = new Image(54,54);
    bimage.srcC
    
    // setup event handlers
    tester.onerror= function() { alert("eek "+tester.src); tester.src = bimage.src; }
    tester.onload = function() { alert("ok "+tester.src);  }
    
    //now set image src to invalid file
    tester.src="./images/wrong.gif";
    
    // should now render blankimage.gif
    document.write('<IMG height=54 alt="" src="'+tester.src+'" width=54 border=0  >');
    </SCRIPT>

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I was in a hurry earlier and had to go...

    Your problem may be trying to switch one image for another, which has not been preloaded:


    var bimage = new Image(54,54);
    bimage.src;
    tester.src = bimage.src;



    -james
    Last edited by jamescover; 07-14-2004 at 04:52 AM.
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <script>
    <!--

    var wImg = new Image();
    wImg.src = "http://www.ekigroup.com/javascript/images/Clipboard1.jpg";

    var rImg = new Image();
    rImg.src = "http://www.ekigroup.com/javascript/images/Clipboard2.jpg";

    function whichImg(){

    if (wImg.complete){
    document.open();
    document.write('<img height=\"54\" width=\"54\" alt=\"wrongImage.gif\" src="'+ wImg.src +'" border=\"0\">');
    document.close();
    } else {
    document.open();
    document.write('<img height=\"54\" width=\"54\" alt=\"rightImage.gif\" src="'+ rImg.src +'" border=\"0\">');
    document.close();
    }
    }

    //-->
    </script>

    <body onload="javascript:whichImg();">


    Using my images above, Clipboard1.jpg will always be written to the page, unless you change the name (emulating a load error), then Clipboard2.jpg will be written to the page.


    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #4
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't know what happend with the code in my original post, but the bimage was already preloaded (see below). I just can't see why this code will not work. The purpose of my full script is to hold an array of known good image file names, so I need to change the value of something based on the onerror event.



    Code:
    <SCRIPT type="text/javascript" language="javascript">
    var tester=new Image();
    var bimage = new Image(54,54);
    bimage.src="./images/blankimage.gif";
    
    // setup event handlers
    tester.onerror= function() { alert("eek "+tester.src); tester.src = bimage.src; }
    tester.onload = function() { alert("ok "+tester.src);  }
    
    //now set image src to invalid file
    tester.src="./images/wrong.gif";
    
    //
    document.write('<IMG height=54 alt="" src="'+tester.src+'" width=54 border=0  >');
    </SCRIPT>

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <script>
    <!--

    var tester = new Image();
    tester.src="./images/wrong.gif";

    var bimage = new Image(54,54);
    bimage.src="./images/blankimage.gif";

    function whichImg(){

    if (tester.complete){
    alert("ok "+ tester.src);
    } else if (!tester.complete){
    tester.src = bimage.src;
    alert("eek "+ tester.src);
    }
    document.write('<img height=54 alt="" src="'+ tester.src +'" width=54 border=0>');
    }

    window.onload = whichImg;

    //-->
    </script>




    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #6
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72 W. 48' 57" , 41 N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    Tomato, what browser is this in? also, do you have this uploaded somewhere where we can take a look at it?
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #7
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by joh6nn
    Tomato, what browser is this in? also, do you have this uploaded somewhere where we can take a look at it?
    I'm trying this on IE 6.0, Netscape 6.1 and Firefox. You can look at the behaviour at

    http://www.spear-connect.com/test.htm

    On all the browsers it behaves the same way.
    Last edited by thetomato; 07-14-2004 at 11:31 PM.

  • #8
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks jamescover. Your script kindof works on IE but not on the other browsers. I get a message saying ok for ./images/wrong.gif. Doing it on the window.onload event isn't any good for me as I need to build up an array of good images beforehand.

    Quote Originally Posted by jamescover
    <script>
    <!--

    var tester = new Image();
    tester.src="./images/wrong.gif";

    var bimage = new Image(54,54);
    bimage.src="./images/blankimage.gif";

    function whichImg(){

    if (tester.complete){
    alert("ok "+ tester.src);
    } else if (!tester.complete){
    tester.src = bimage.src;
    alert("eek "+ tester.src);
    }
    document.write('<img height=54 alt="" src="'+ tester.src +'" width=54 border=0>');
    }

    window.onload = whichImg;

    //-->
    </script>




    -james

  • #9
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72 W. 48' 57" , 41 N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    James, is Image.complete IE only? i don't remember it being a part of the Ecma spec, but it's been a while since i've taken a good look at the Image properties. your solution is a good atlernative, if for some reason we can't get this working, but i'd rather figure out what's wrong, if i can, before resorting to a work-around. though i suppose that's really Tomato's call, in the end.

    Tomato, i'm looking more closely at your code now, and i'm wondering if the problem might be that you document.write the image tag, before the onError handler has had a chance to fire; remember that the attempt to find wrong.gif has to time out first, which can take up to 30 seconds, depending on server configurations. if that were the case, the image would be written, then onError would fire, and the onLoad would fire. which i think would look very much like what we're seeing now.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #10
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Joh6nn:

    James, is Image.complete IE only?

    http://devedge.netscape.com/library/...e.html#1193409

    I thought that everything needed to be in a single function to avoid any event conflicts, and some elements weren't being defined before they were needed...



    <SCRIPT type="text/javascript" language="javascript">
    var tester=new Image();
    var bimage = new Image(54,54);
    bimage.src="./images/blankimage.gif";

    // setup event handlers
    tester.onerror= function() { alert("eek "+tester.src); tester.src = bimage.src; }
    tester.onload = function() { alert("ok "+tester.src); }

    //now set image src to invalid file
    tester.src="./images/wrong.gif";


    //
    document.write('<IMG height=54 alt="" src="'+tester.src+'" width=54 border=0 >');
    </SCRIPT>










    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #11
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tomato, i'm looking more closely at your code now, and i'm wondering if the problem might be that you document.write the image tag, before the onError handler has had a chance to fire; remember that the attempt to find wrong.gif has to time out first, which can take up to 30 seconds, depending on server configurations. if that were the case, the image would be written, then onError would fire, and the onLoad would fire. which i think would look very much like what we're seeing now.
    Joh6nn, thanks. You may well be right. I can't claim to be a Javascript expert at all and I wrote the code with the expectation of some sequentiallity in execution. So I expected the onerror and onload code to be finished before the document.write. I'm not too bothered about using the document.write statement, the real aim is to be able to exit the code with the image variables containing bona-fide .src properties (ie files that actually exist) that I can use later in html.

  • #12
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72 W. 48' 57" , 41 N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    whether that's gonna work or not will depend on how you intend to use them; if you'll be document.write()-ing them out, then i can't guarentee that'll work, for exactly the same reason it's not working now.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #13
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't really know why but when I put the event handling in-line it seems to work.


    Code:
    <SCRIPT type="text/javascript">
    document.write('<IMG height=54 alt="" src="./images/blankimage.gif" width=54 border=0 id="sp1" onError="this.src=\'./images/blankimage.gif\'" onAbort="this.src=\'./images/blankimage.gif\'">');
    </SCRIPT>

  • #14
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    An error event occurs only when a JavaScript syntax or runtime error occurs, not when a browser error occurs. For example, if you try set window.location.href='notThere.html' and notThere.html does not exist, the resulting error message is a browser error message; therefore, onError would not intercept that message. However, an error event is triggered by a bad URL within an IMG tag or by corrupted image data.



    http://devedge.netscape.com/library/...s.html#1120097


    -james
    Last edited by jamescover; 07-18-2004 at 09:34 AM.
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "


  •  

    Posting Permissions

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