Using jQuery to Preload Images with CSS and JavaScript
(Page 1 of 4 )
If you’re a web designer searching for a guide to implementing the most common graphic preloading methods available nowadays, then you've come to the right place. This five-part article series lets you accomplish this task by utilizing either a few basic style sheet properties or the functionality provided by client-side scripting. In this fifth part of the series, we'll employ the jQuery JavaScript library to assist in preloading our images.
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!
Next: Review: creating an image preloader mechanism with plain JavaScript >>
More JavaScript Articles
More By Alejandro Gervasio
