www.webdeveloper.com
Results 1 to 6 of 6

Thread: (jQuery) loading images blindly

  1. #1
    Join Date
    Apr 2010
    Location
    Brooklyn NY
    Posts
    104

    (jQuery) loading images blindly

    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?

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

  2. #2
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    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:
    Code:
    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;"/>');
    			
    		}
    		
    	
    }

  3. #3
    Join Date
    Apr 2010
    Location
    Brooklyn NY
    Posts
    104

    resolved

    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.

  4. #4
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    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.

  5. #5
    Join Date
    Apr 2010
    Location
    Brooklyn NY
    Posts
    104
    do you have atleast 1 file that matches the search url?

  6. #6
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles