Javascript - check if image exists

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);
}

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:

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.

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.

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.

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?

Not to show the page until the images are fully loaded.

Try this article:
http://www.trap17.com/index.php/image-preloader-progress-bar-status_t21316.html#

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

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

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

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?

That is a good plan.  I think That will work.