JQuery_ Novice to Ninja - Earle Castledine [88]
chapter_06/08_ajax_image_gallery_improved/script.js (excerpt)
complete: function() {
setTimeout(function() {
_gallery.load();
}, _gallery.delay);
}
The setTimeout function waits for the delay period to expire before calling our GALLERY.load method again. But our display method simply appends images to the gallery’s containing element, so every call will just add another stack of images to the page. That’s going to get out of hand quite quickly! It will obviously be necessary to clear the existing images before we add the new ones. Again, there are few spots where we could do this; the start of the success method is a good candidate, but we could also experiment with other places.
For our effect, we’d like to fade out the images slowly as soon as the next set is requested. This gives us a nice wash of images fading in and fading out over time. The local beforeSend event is our friend here. It gives us a chance to react before the user’s request is sent off to the server:
chapter_06/08_ajax_image_gallery_improved/script.js (excerpt)
beforeSend: function() {
$(_gallery.container)
.find('img')
.fadeOut('slow', function() {
$(this).remove();
});
}
All we’ll do is grab the current set of images and slowly fade them out. When the callback method of the fadeOut function fires (indicating that the fade is done), we’ll remove the images from the page. The next set of images can now happily take their place.
This also solves our progressive enhancement problem. Now that our gallery widget is removing existing images from the page before loading new ones, we can safely add a set of static images to our HTML page for visitors without JavaScript.
If we showed this cool gadget to the client in its current state, he’d find it hard to believe that it was really using Ajax, because there’s no animated spinning GIF image! We’d better add one before he comes around …
Adding a Spinner
A spinner is an animated image used to show the user that work is in progress on the page; it usually indicates that an Ajax request is underway and we’re waiting for the server to respond.
Because the spinner is a JavaScript-dependent feature, it should be added to the page using JavaScript. Often a page will begin with one or more spinners spinning, to show the user that additional information is being loaded. When the loading is done, the spinner is removed. But a common practice among some web developers is to include the image in the HTML or CSS code. This creates a problem: if users have JavaScript disabled, they’re greeted with a page full of spinning GIFs, leaving them wondering if anything is happening at all! The rule should always be: if you’re going to remove it with JavaScript, you should add it with JavaScript!
You can be fairly flexible with exactly how you create your spinner. We’ll be setting it as the background image of a block-level element, but you could just as easily include it as an img tag. Here’s the CSS:
chapter_06/09_ajax_gallery_with_spinner/script.js (excerpt)
#spinner{
height: 100%;
background: transparent url(spinner.gif) no-repeat center center;
}
Our old images are being removed in the beforeSend event, before the Ajax request is sent off. That sounds like a perfect spot to start our spinner spinning, so that users will never see a blank, empty page. The new element stretches over the entire gallery display area—and our spinner is centered horizontally and vertically:
chapter_06/09_ajax_gallery_with_spinner/script.js (excerpt)
$('
').attr('id', 'spinner')
.hide()
.appendTo(gallery.container)
.fadeTo('slow', 0.6);
All good things must come to an end, so after the Ajax call is done we need to eliminate the new element. The optimal place for us to do that is in the complete handler, to ensure that we remove the spinner no matter what the outcome of the request. Preceding the removal with a slow fade seems