...

View Full Version : .src property not changing onerror



thetomato
07-14-2004, 12:50 AM
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



<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>

jamescover
07-14-2004, 01:09 AM
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

jamescover
07-14-2004, 05:52 AM
<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

thetomato
07-14-2004, 10:53 AM
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.




<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>

jamescover
07-14-2004, 01:17 PM
<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

joh6nn
07-14-2004, 07:20 PM
Tomato, what browser is this in? also, do you have this uploaded somewhere where we can take a look at it?

thetomato
07-15-2004, 12:26 AM
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.

thetomato
07-15-2004, 12:30 AM
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.


<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

joh6nn
07-15-2004, 03:11 PM
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.

jamescover
07-15-2004, 05:18 PM
Hi Joh6nn:

James, is Image.complete IE only?

http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/image.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

thetomato
07-15-2004, 09:36 PM
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.

joh6nn
07-16-2004, 02:11 AM
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.

thetomato
07-17-2004, 04:24 PM
Don't really know why but when I put the event handling in-line it seems to work.



<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>

jamescover
07-18-2004, 10:25 AM
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/manuals/2000/javascript/1.3/reference/handlers.html#1120097


-james



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum