This is a lightweight and user-friendly jQuery plugin that makes page loading faster. DynamicWP.net PR and editor Eko Setiawan created it exclusively for WordPress’s TwentyTen Theme.

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.

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;
        }

Incoming search terms for the article:

• 200X200 avatars
• wordpress preload images
• preload images wordpress
• preload images jquery wordpress
• 200×200 avatar
• page loading jquery
• loading jquery
• loading page jquery
• image loading jquery
• wordpress image preloader