Broken Images

**maverick** · 09-15-2005, 10:38 PM

Hi,

Well I was looking for a certain script that I can't seem to find,I run a small personal site and some of my images are hosted on other servers,so sometimes if the server is down the image will appear broken,is their any script I can use so that if my image is broken the script will replace it with another image of my choice? thanks in advance

kind regards

Maverick

**Twey** · 09-16-2005, 10:38 AM

is their any script I can use so that if my image is broken the script will replace it with another image of my choice?

Nope. Javascript doesn't know if the image is there or not; all it sees is the HTML that makes up the image.

**jscheuer1** · 09-16-2005, 03:45 PM

Ahem:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<script type="text/javascript">
<!--
//Check Image Load © John Davenport Scheuer
//this credit must remain for legal use
var ns6Op8=!document.all||window.opera
if(ns6Op8){
var loads=new Array()
onload=function(){
var pics=document.images
for (var i_tem = 0; i_tem < pics.length; i_tem++)
if (loads[i_tem]==undefined)
pics[i_tem].src=pics[i_tem].lowsrc
}
}
//-->
</script>

<img src="no.jpg" lowsrc="1st.jpg" onerror="this.src=this.lowsrc;" onload="if(ns6Op8){loads[0]=this.src}" />
<img src="fold.gif" lowsrc="1st.jpg" onerror="this.src=this.lowsrc;" onload="if(ns6Op8){loads[1]=this.src}" />
</body>
</html>

I just whipped this up for the four major 'pc/windows' browsers that I'm aware of, it should work in some other browser/OS combos but, in some I'm sure it will need to be tweaked. I think there should also be a way to get the image tag's onload event to assign itself the correct index number for the loads array. Probably by making code or a function for that in the script.

**jscheuer1** · 09-16-2005, 06:11 PM

I was right, it complicates the script (also because I added error checking and code to make it play well with other potential scripts on the page) but, simplifies the markup considerably. Put this script in the head:

Code:

<script type="text/javascript">
<!--

//Check Image Load © John Davenport Scheuer
//this credit must remain for legal use

function checkLoad(img){
var pics=document.images
for (var i_tem = 0; i_tem < pics.length; i_tem++)
if (pics[i_tem]==img)
loads[i_tem]=img.src
}

var loads=new Array()

function isLoaded(){
var pics=document.images
for (var i_tem = 0; i_tem < pics.length; i_tem++)
if (loads[i_tem]==undefined&&pics[i_tem].lowsrc)
pics[i_tem].src=pics[i_tem].lowsrc
}

if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", isLoaded, false );
else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", isLoaded );
}
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            isLoaded();
        };
    }
    else
        window.onload = isLoaded;
}
//-->
</script>

Now the markup can look like this:

HTML Code:

<img src="no.jpg" onload="checkLoad(this)" />
<img src="no.jpg" lowsrc="1st.jpg" onload="checkLoad(this)" />
<img src="fold.gif" lowsrc="1st.jpg" onload="checkLoad(this)" />

Notice the onload event added to the first image with no lowsrc attribute. This is wrong but, will be ignored due to error checking. I could have added the image tags' onload checks dynamically but, Opera didn't like that, FF and IE thought it was fine. One other note, the lowsrc attribute is the alternate image and can be a different one for each image tag. If both the lowsrc and src are missing, you will get the regular broken image except in FF which, for some reason, renders no image at all. Also FF will hang trying to load the page at times if any of the primary images are not found but, with a refresh or two will load the alternate(s), if available, and the page in general if the alternate(s) is/are unavailable.

**Twey** · 09-16-2005, 07:40 PM

I could, of course, be wrong.

**maverick** · 09-16-2005, 10:29 PM

thanks for all the help guys

Thread: Broken Images

Thread Tools

Search Thread

Broken Images

Bookmarks

Bookmarks

Posting Permissions