(jQuery) loading images blindly

[Marius Miliunas]

I've got image files named 0-0, 0-1, 0-2 and so on up to a certain point, and I want to load each file until it can't find another, hence the jquery ajax error. At the moment, this works in firefox only.

Anyone know any work arounds?

for (var i = 0; i < _images.length; i++) {
		var ready = 1;
		var count = 0;
		var arr = [];
		while(ready) {
			var cacheImg = document.createElement('img');
			var src = 'files/images/thumbs/' + i + '-' + count++ + '.gif';
			$.ajax({
				type: 'GET',
				url: src,
				success: function() { arr.push(src) },
				error: function() {
					$.preloadImages(arr);
					W.lengths.push(count - 1);
					ready = null
				}
			});
		}
	}

[Christophe27]

I don't think this could work at all? Putting an AJAX GET request in a while loop makes send you thousands of requests to the server in a few seconds, which cannot be answered as fast from the server, as your script executes.

The common approach is actually to store the basename (filename + extension) in a database. If you don't have a database, check how many files there are in the folder, pass this to JS and then create a for loop. Not with requests from JS!!!, but to build your img-tags dynamically.

Something like:

window.onload = function() {  
	
		for ( i = 0; i < <?php echo $num_files; ?>; i += 1) {
		
			var src = '/test/0-' + i + '.gif';
			$('body').append('<img src="' + src + '" style="max-width: 300px;"/>');
			
		}
		
	
}

[Marius Miliunas]

Ok, so I guess this is browser specific, with it being Mozilla the only one that can handle this sort of thing.

So I guess that answers my questions. I remember being able to do something like this with actionscript 3, using a try/catch and I really wanted to find a way to do it with javascript, but oh well.

Thanks for the response.

[Christophe27]

Hmm, if you want to do this pure in JS, then you have to work with a callback. The error method is actually a callback, but when I test your code in Firefox, it sends thousands of requests, without waiting for the error callback.

But it is after midnight here, maybe (probably) there will be a solution.

[Marius Miliunas]

do you have atleast 1 file that matches the search url?

[JunkMale]

You load in to background your images via plain old Javascript.

imageYouWant = new Image;
or
imageYouWant = new Image();
or
imageYouWant = new Image(100,300); // with size

the Object then is requested by

imageYouWant.src = "some/image/pathname/on/server.jpg";

you can add an onload event or as I prefer, onerror with a handler to handle errors.

you can also do this as an array of objects

you can iterate through the document body and use the image object to control your image loads.

document.images.length and a loop and the image load... your then cooking in less than 15 lines of code including comments.