Javascript - check if image exists

josephdaviskcrm
josephdaviskcrm used Ask the Experts™
on
I'm trying to create an image preloader script on my page.  What I've got is shown below.  However, when the page loads, I'm still noticing that the images are taking a while to pop into place.  Is there in javascript to check and see if a file exists or not?  Or a better question, is there a way with the javascript to check and see if one of these image objects that I'm assigning an image path to actually is pointing at an existing image?
imageObj = new Image();
images = new Array();
 
images[0] = "Images/btnHome.png";
images[1] = "Images/btnHome_hover.png";
images[2] = "Images/btnBio.png";
images[3] = "Images/btnBio_hover.png";
images[4] = "Images/btnResume.png";
images[5] = "Images/btnResume_hover.png";
images[6] = "Images/btnLessons.png";
images[7] = "Images/btnLessons_hover.gif";
 
for (var i = 0; i < images.length; i++) {
    imageObj.src = images[i];
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Is this a plain HTML page or is there some sort of server processing going on? (php, server-side includes, etc.)

Author

Commented:
I've modified my code like this so that it would tell me when it was done loading each image.  I was expecting that if I was pointing an image object at a wrong path to a real image then it wouldn't do the alert because it would error out, but I get the alerts no matter what path I specify for the image objects.
for (var i = 0; i < images.length; i++) {
    imageObj.src = images[i];
    imageObj.onLoad = imageLoaded(images[i]);
}
 
function imageLoaded(imgName)
{
    alert(imgName);
}

Open in new window

Author

Commented:
Well I am using asp.net, but the page had might as well be html for what I am using it for.  There is no server side processing that is going into the structure of these images.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
The reason I asked about the server-side, is that you could build the javascript dynamically on the server, and check the paths before you added them to the array.

Author

Commented:
Well it's not a matter of having dynamic images that would need to be loaded.  Once I get the site built it will be the same images that will be loaded from then on out.  I just wanted to make sure that the path I was specifying for the preload on these images was working.  I've figured out since then that I do have the correct path.  But that being the case, this preloading thing is just not working.  I've gone as far as to create a separate page that runs this javascript image preloading code that I've got and when it's done it forwards the page on to the actual site.  But I'm still having problems.  I need a more effective way of doing this image preload.

Commented:
What is you ultimate goal to speed up the loading of the images on the primary page or to not show the page until the images are fully loaded?

Author

Commented:
Not to show the page until the images are fully loaded.
One simple way to make your page wait till it is completely loaded is just write "display: none " for the body in your CSS and using jquery

$(document).ready(function() {
     $("#your_body_element_id").css("display","block");
});

use display: none & display: block
or
visibility: hidden & visibility: visible

Author

Commented:
Doesn't that mess with Search Engine Optimization?
There is nothing to affect your SEO, this is just the way to display your page that it :)
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
> One simple way to make your page wait till it is completely loaded is just write "display: none " 
> for the body in your CSS and using jquery

So the page will be blank (read: useless) in a browser that jQuery doesn't support or does not have JavaScript support enabled?

Author

Commented:
Well that won't be a problem, I can detect browser settings on the server side and if I detect a browser that doesn't support JavaScript I will just feed them a toned down version of the page that I was already planning on creating.

My concern still exists with SEO.  I was under the impression that Google indexing bots are smart enough to tell if a page has content on it that is hidden.  If the page loads with the content hidden like that then it will be flagged as a spam page regardless of the state that the page ends up in.  The Indexing bots don't know how the page ends up after it has been changed by JavaScript.  Right?
If you have concern with making ur page hidden then you place the div container of the images alone to display none and load that div visible once the complete page is loaded since that wont make any such issues and google indexing is also based mostly on the text and not on images in your page

Author

Commented:
That is a good plan.  I think That will work.
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
> I can detect browser settings on the server side

I don't want to be a nuisance, but how would you do that?  User-agent sniffing doesn't work.  Any desktop browser that supports JavaScript provides a way for users to disable it -- and some users do. (In some browsers users are even able to selectively disable it.)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial