Code Snippet > JS - jQuery

How to Create Preload Images with jQuery in WordPress

In todays tutorial, we will learn how to preload the images with jquery. With this feature your site can enhancing user exprience.

JS - jQuery

<script type="text/javascript">

		jQuery(function () {
			jQuery('.post-thumbnail-title img').hide(); //hide all the images on the page
		});

		var i = 0; //initialize
		var int=0; //Internet Explorer Fix
		jQuery(window).bind("load", function() { //The load event will only fire if the entire page or document is fully loaded
			var int = setInterval("doThis(i)",500); //500 is the fade in speed in milliseconds
		});

		function doThis() {
			var imgs = jQuery('.post-thumbnail-title img').length; //count the number of images on the page
			if (i >= imgs) { //Loop the images
				clearInterval(int); //When it reaches the last image the loop ends
			}
			jQuery('img:hidden').eq(0).fadeIn(500); //fades in the hidden images one by one
			i++; //add 1 to the count
		}
</script>

Source: http://www.dynamicwp.net/articles-and-tutorials/how-to-create-preload-images-with-jquery-in-wordpress/