How to Create Preload Images with jQuery in WordPress

19th Mar 2011 | Posted by Eko S. | 13 Comments

In today’s tutorial, we’ll learn how to preload the images with jquery. With this feature your site can enhancing user exprience. This tutorial is a continuation of our previous tutorials. And this tutorial can only run if you have been working on our previous tutorial.

You may be interested in other customized twentyten theme tutorial:

• Easy Way to Add Social Media Count Button in WordPress
• How to Create a Stylish Post Title on your Homepage
• How to Display Featured Post on Sidebar with Thumbnails

Step 1. Upload the loading image

Please download the loading image (loading.gif) first and upload to your images folder in your theme files.

Step 2. Add The jQuery

As usual in this tutorial we use the twentyten theme. Make sure this code below is in your file header.php

<?php wp_enqueue_script('jquery'); ?>

This code serves to call jQuery function.

Then insert this jQuery preload function below wp_head();

<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 3. The Styling

Now we will style the CSS. Please take a look the css style in our previous tutorial and add this style:

background: url(images/loading.gif) no-repeat 50% 50% scroll transparent;

on class .post-thumbnail-title on that tutorial, 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;
	}

The Result

If this all goes according to plan, it should look rather nice, something similar to this (with your own content of course):

That’s All. Again please take a look our previous tutorial to run this tutorial. Hope it useful. Feel free to share your ideas in the comments below.

This tutorial we made solely to the TwentyTen theme, if you have difficulty in applying this tutorial on your theme. We are willing to provide premium support to you, please contact us via email: dynamicwp[at]gmail[dot]com

Want to be emailed when new comments are added?