Creating Preload
Images with jQuery in WordPress
Marvin
This is a lightweight and user-friendly jQuery tutorials plugin that makes
page loading faster. DynamicWP.net (http://www.dynamicwp.net/) PR and editor Eko Setiawan created it exclusively for WordPress’s TwentyTen
Theme (http://wordpress.org/extend/themes/twentyten).
Check out this plugin’s demo here:
This tutorial will teach us how to preload images with
jQuery.
Step 1:
Download the loading image here: http://www.dynamicwp.net/wp-content/uploads/2011/03/loading.gif
Step 2:
Upload the loading image folder you have just downloaded to
the themes file.
Step 3:
This code should be on your file header.php of your
TwentyTen Theme as it serves to call the jQuery function.
<?php
wp_enqueue_script('jquery'); ?>
Step 4:
Below the wp_head(); insert this jQuery
preload function
<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>
Step 5:
For styling the CSS, open the style.css and
add this below on class .post-thumbnail-title
background: url(images/loading.gif) no-repeat 50% 50% scroll transparent;
It should look like this:
.post-thumbnail-title {
border: 1px solid #ccc;
height: 150px;
padding: 4px;
width: 600px;
position: relative;
background: url(images/loading.gif) no-repeat 50% 50% scroll transparent;
}
