Creating Preload Images with jQuery in WordPress

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:

http://themes.dynamicwp.net/

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;

        }