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>
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.