javascript: check if image src exists

[Plater]

I have seen a lot of pre-loading scripts and none of them seem to help with my problem.

Let's say I have a list of images:
"image1.jpg"
"image2.jpg"
"image3.jpg"

And all the pictures hosted at both:
http://mydomain.com/images/
http://mydomain2.com/images/

I would like to attempt to load pictures from:
http://mydomain.com/images/
and if they fail, get them from the mirror site.

It is acceptable that if one image cannot be found on the first location, to bypass it and get ALL the images from the second location.


Originally I had something like this:

<img src="http://mydomain.com/images/image1.jpg" onerror="this.src='http://mydomain2.com/images/image1.jpg'" />
 

However, that seems to be a no-no for standards, not to mention causes an infinite loop if the image can also not be found at the second location.

It was recomended that I switch to useing javascript to pre-load the images, but I couldn't find anything in the DOM about detecting if there was an error loading or not.

Does anyone have any ideas for how to detect if the location given to .src can be found?

[acoder]

Try using the complete property. You could use setInterval/setTimeout to make a check that the image has loaded after a period of time.

[Plater]

Try using the complete property. You could use setInterval/setTimeout to make a check that the image has loaded after a period of time.

I saw the complete property, and saw that IE/FF/opera have it, but that it wasn't part of the standards so I didn't look into it any more.
Would you say it would be safe to do so?

So I tried using it:

function ImgLoad(sSrc)
{
   var oImg=new Image;
   oImg.src="http://mydomain.com/images/"+sSrc;
   if(oImg.completed)
   {
      return oImg.src;
   }
   else
   {
      return "http://mydomain2.com/images/"+sSrc;
   }
}
 

However, it seems that the .src call doesn't block so it will always show "completed" as false?

[acoder]

No, the property is called "complete" and you use it on the Image object, not on its source.

[Plater]

No, the property is called "complete" and you use it on the Image object, not on its source.

Yeah i checked that and fixed it.
It still is always false.
I even tried putting in a while loop to wait for it, waits a looong time, get the "script stopped working" notification...then it works fine everytime?

On a side note, I'm getting REALLY tired of having to use the taskmanager to close FF....

[acoder]

How are you calling ImgLoad()?

Another option is to use imgObj.onload - again non-standard, but should be supported by *most* browsers.

[Plater]

Yeah, I have been thinking of using .onload() and .onerror() to determine rather then .complete

But again, I was hoping there was something in the standard for it.

This works in both FF2 and IE6:

function ImgLoad(myobj,sSrc)
{
   var oImg=new Image;
   oImg.src="http://mydomain.com/images/"+sSrc;
   oImg.onload=function(){myobj.src=oImg.src}
   oImg.onerror=function(){myobj.src="http://mydomain2.com/images/"+sSrc}
}
 

Call the function with the object of your image and the filename.
If it find the first file it changes the src on the object to it.
On error it sets the the src to the 2nd location.
If it doesn't find it on the 2nd location it will just show a broken image like it should

[acoder]

One other possibility is to use Ajax to check if the image exists.

[Plater]

One other possibility is to use Ajax to check if the image exists.

I already have an XMLHttpRequest busy doing stuff.
It was enough trouble getting that in there correctly.
Stupid errors always thrown.

[acoder]

I already have an XMLHttpRequest busy doing stuff.
It was enough trouble getting that in there correctly.
Stupid errors always thrown.

That shouldn't be the case. You could even have simultaneous XMLHttpRequests.

Do you mean JavaScript errors? Perhaps you could post some of your code.

[Plater]

Haha ok you asked for it then.

Here's an example of the state change handler function I use for one of the requests:

function handleSaveSmtpSettingsReponse()
{
    if(http.readyState == 4)
    {
        var update = new Array();
        if (http.status=="200")
        {
            var response = http.responseText;    
            if (response!="")
            {
              if(response.indexOf('|' != -1)) 
              {
                    update=response.split('|');
                    if (update.length>0)
                    {
                        if (update[1].indexOf("SUCCESS")>-1)
                        {
                            var line=update[1];
                            alert('Smtp Settings Saved Successfully.');
                            resetSaveSMTP();
                        }//end of found "SUCCESS"
                        else
                        {
                            ShowError('Smtp Settings **NOT** Saved.');
                        }
                    }//end of update split("|") to have multiple sections
              }//end of response.indexof("|")
            }//end of response!=""
        }//end of status==200
        else if(http.status==12029)
        {//only occurs in firefox?
            ShowError('Problem Communicating');
        }
        else
        {
            alert(http.status);
        }            
    }//end of readystate=4
}//end of function
 

I really should also have try/catch blocks there since firefox's javascript throws errors when I navigate to a new page before the request has come back (it comes back and goes "these functions don't exist")

[acoder]

I really should also have try/catch blocks there since firefox's javascript throws errors when I navigate to a new page before the request has come back (it comes back and goes "these functions don't exist")

Is that the only time that errors occur? What is the exact error message?

[Plater]

That was the culmination of me trying to track every situation possible.
I think the errors might not exist, but are caused by firebug trying to track things.

Regardless, using the .onload()/.onerror() seems to be working.

[acoder]

Regardless, using the .onload()/.onerror() seems to be working.

At least you've got it working with your original solution.

I still think you could give the Ajax route a shot, but it's up to you!

[Plater]

I had a goof in my post on the "working solution", sometimes it wasn't, and I found out why.

function ImgLoad(myobj,sSrc)
{
   var oImg=new Image;
   oImg.onload=function(){myobj.src=oImg.src}
   oImg.onerror=function(){myobj.src="http://www.mydomain1.com/images/"+sSrc}
   oImg.src="http://www.mydomain.com/images/"+sSrc;            
}
 

Need to assign the handlers prior to setting the SRC.
Sometimes it would do the SRC so fast (image is cached locally?) that it would complete before assigning event handlers.

[acoder]

Need to assign the handlers prior to setting the SRC.
Sometimes it would do the SRC so fast (image is cached locally?) that it would complete before assigning event handlers.

That would probably be the case. To avoid caching, you can add a random parameter or the date/time to get a unique request.