Using jQuery to Preload Images with CSS and JavaScript

Even though the topic seems intimidating and somewhat obscure, preloading images on web pages is a fairly straightforward process that can be mastered with only an average background in CSS and JavaScript. That's all you need, really.

Of course, if you've been a patient reader of the series and already went through all of the parts  previous to this one, then you now have solid knowledge of how to use a combination of CSS and JavaScript to create some simple, yet functional, image preloading mechanisms on your own (X)HTML pages. In the course of those tutorials I demonstrated how to accomplish this with a decent variety of code samples.

To be more specific, I left off the last tutorial showing how to prefetch a set of sample images in the background by using just plain JavaScript, which speaks for itself about the simplicity of this process. However, the trends that rule the world of modern web design say that if something can be done with native JavaScript, it's quite probable that the same results can be obtained using the level of abstraction offered by jQuery. In keeping with this idea, in this last installment of the series, I'm going to demonstrate how to develop a small image prefetching application, which will base all of its functionality on the jQuery library to do its business.

Ready to tackle the final chapter of this hopefully educational journey in preloading images with CSS and JavaScript? Then don't hesitate anymore; click on the link below and jump in!