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>
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
__________________
"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. "
Last edited by jamescover; 07-14-2004 at 04:52 AM..
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. "
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>
__________________
"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. "
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";
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.
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";
__________________
"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. "
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.
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.
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.
__________________
"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. "
Last edited by jamescover; 07-18-2004 at 09:34 AM..
Before you post, read our: 
