Preloading Images

[jem122974]

I have a series of images that are all named the same but with a different number at the end, for example titleTim1.jpg, titleTim2.jpg, etc. They all reside in the images folders. So I would like a script that loops through and loads them all. But the catch is I'd like to be able to add images or remove images without changing my code. And I'd like to end up knowing how many got loaded. So here is what I have so far, but how do I stop the loop when it hits a image URL it can't find? This just keeps on rolling even though I only have 8 images.

	function preload() {
		max = 20;
        num_images = 0;
		imgList = new Array();
		for (c = 1; c < max; c++) {
			imgList[c] = new Image();
			imgList[c].src = "images/titleTim" + c + ".jpg";
			if (imgList[c] == null) {
                num_images = c-1;
                alert(num_images);
				c = max + 1;
			}
		}

 

[j4606]

This would be better for a server side language.

 

[jem122974]

I agree, but what if I don't have a server side lang available? Can it be done in js?

 

[j4606]

Yeah but I wouldn't use js to check this. If it's your only option, try google. I found some examples where people used an image object with the onerror property. I think the best way would be to use an http request. Then use status codes to see if your request is valid. if you get a 404 or any other error don't load the image.

 

[jem122974]

Interesting... I wouldn't have thought of using the httprequest. Let me do some testing and then I may be back... Thanks for your thoughts. Getting the right idea is half the battle!