Back jQuery

How to Create Preload Images with jQuery in WordPress

WRITTEN BY ON 20 Mar 2011
13,626 VIEWS • SHARES
0 comments

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>

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.