Back jQuery

How to Create Preload Images with jQuery in WordPress

WRITTEN BY ON 20 Mar 2011

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

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.