Adding a Loading Indicator to the Before/After Plugin

Sometimes you may not be able to pre-load the images you’re using with the before/after plugin. In that situation you may want to give your visitors some indication that the images are loading so that they’re not left scratching their heads wondering if there’s a problem. Fortunately with a little jQuery and CSS you can add a loading indicator to the before/after plugin.

The jQuery

After the jQuery code to instantiate the plugin, add (assuming a container with the id of “conjainer”):

$('#container').prepend('<p id="loader">Loading...</p>');
$('#container > div:eq(2) > img').load(function() {
	$('#loader').remove();
});

The CSS

Then add some styling. Here we’re adding an animated loading gif:

#container {
	border:2px solid #666;
}
#loader {
	background: #e9e9e9 url(ajax-loader.gif) no-repeat 50% 50%;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

And that’s it! Note that this is just a basic example and it only tests for one of the two images being loaded, however it’s basic to extend this concept further and even provide more feedback to the user.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>