Enhancing the z-index Gallery with a preloader

In this tutorial we enhance the last week created z-index gallery with a picture preloader and a loading indicator to smooth up the gallery. In barely 10 lines of code! Demo Source

Introduction

In the tutorial Create a unique Gallery by using z-index and jQuery last week we created a pretty kewl gallery, but it was incomplete for production mode. When loaded for the first time you could see how the images load and build themself slowly up. To have alot smoother look we want to preload all images and show a overlay which shows the visitor that the gallery loads. And we do that in barely 10 lines of code.

The CSS for the loader overlay

OK, we want to indicate that we are loading the gallery. We get ourself a nice looking loading animation from ajaxload.info. Next we need a DIV that lies above the pictures and the controls:

We style the overlay with CSS and add the markup for the loader overlay DIV when the DOM is ready with jQuery. So we don’t have to touch any galleries markup (good if we have not only one gallery).

The CSS for the overlay looks pretty much like the CSS for the pictures, it has absolute position and is aligned to the top left of the pictures container:

The first difference is the height, we want to hide the controls as well. So we add the height of one picture (all pictures have equal height) and the height of the controls. Since the overlay container has absolute position it simply overlaps the controls container as well. Next we have the little loading animation centered as background. With the high z-index we make sure that our loader overlay DIV really overlays all images.

Adding the overlay to the DOM and preload images

Adding the overlay DIV is of course really simple wth jQuery:

It will be added as soon as the DOM is ready and we want to fade the loader overlay DIV out when all images are loaded. This is the complete code to solve this problem:

We simply extend the loop for adding a z-index to each picture. Let’s break this code into interesting new parts.

That one line has pretty much magic in it. We create a new Image Object with the src to the picture we want to preload. We apply the load callback to determine when a picture is loaded.

If a picture is loaded (callback is executed) we increase the counter by one.

Next we check if the number of the loaded pictures equals the total numbers of pictures. If so everything is ready and we can fade out the loader overlay DIV.

Conclusion

Again a great example how a few lines of jQuery (exactly 3) can solve a decent problem. Now the z-index Gallery is sexy from the start to the end and can safely be used in your live websites.

This weeks tutorial was a little bit short because I had alot of other work recently. But next week we go into detail again by combining the Wordpress Comments feature and jQuery. It will be useful, interesting and fun!