JQuery_ Novice to Ninja - Earle Castledine [87]
We could grab our data with the $.get helper method, but our gallery is going to become more complex rather quickly, so we’ll be needing the advanced features of the $.ajax function. We set up our callback using the success option. The callback will split the data into an array, with each element containing a reference to an image:
chapter_06/07_ajax_image_gallery/script.js (excerpt)
load: function() {
var _gallery = this;
$.ajax({
type:"get",
url: this.url,
success: function(data) {
var images = data.split('|');
$.each(images, function() {
_gallery.display(this);
});
}
});
}
Tip: Going Loopy
The $.each utility function is a nice jQuery way of looping through JavaScript object and array elements—just pass it the array and a callback function for each element. The callback function also accepts an optional parameter that provides you with the index of the element in the original array, if you need it.
With a collection of filenames in hand, we now need to create the img tags and append them to the document. We could do this in the success callback of our load function, but our widget will quickly become confusing if we just throw all our functionality into one big bucket like this. A nicer approach is to separate the loading code from the displaying code. That’s why we created the display stub earlier—it accepts our image URL and adds a new image to the gallery’s containing element:
chapter_06/07_ajax_image_gallery/script.js (excerpt)
display: function(image_url) {
$('')
.attr('src', 'images/' + data)
.hide()
.load(function() {
$(this).fadeIn();
})
.appendTo(this.container);
}
The load we call here isn’t GALLERY.load; it’s the regular jQuery load event. So when the image tag has finished loading its source, we perform a fadeIn.
We’ve set up our gallery widget, but we’ve yet to set it in motion. All that’s required is a GALLERY.load() call once our document is ready:
chapter_06/07_ajax_image_gallery/script.js (excerpt)
$(document).ready(function() {
GALLERY.load();
});
Randomizing the Images
Fire this up in your browser and you’ll see your new Ajax gallery in full swing! Well, sort of … it’s really just a static set of images being loaded separately from the main page. That is not very Ajaxy! Ideally, we’d like to ping our server at regular intervals to rotate the images at random.
Note: Not so Random
Because we’re faking a server response with a static text file, the images won’t be random: the same six images will load every time. If you have a little server-side know-how, it should be a simple task to build a quick script to serve up random images.
There’s another problem with our current gallery: if you load the page without JavaScript, you’ll see an Image Gallery section with no images in it. Ideally, we’d like some static images to be there by default, and then replace them with Ajax if JavaScript is available.
If we first solve the problem of periodically replacing the images, we should also be set up to replace an initial batch of static images, so let’s look at that first. We’ll need to set a timer that will call our loading function every few seconds.
The timer could be set in a few different places, each with a slight variation in effects. We’d like to set it so that requests occur a set amount of time after the previous set has finished loading. If we set a constant delay between requests (say, with the setInterval function), a slow network response might cause some images to be displayed for a very short amount of time before being replaced by the next set.
We could avoid this by starting the timer after we process the last set. Perhaps we should start our timer in the success callback? Think about that for a second: what would happen if a request was unsuccessful? Our success callback would never fire, so we’d never set up our timer and never reload new images.
The solution is to handle the complete event in our $.ajax call. We saw