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(/articles_and_tutorials/how_to_create_preload_images_with_jquery_in_wordpress/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(/articles_and_tutorials/how_to_create_preload_images_with_jquery_in_wordpress/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

9 Comments to “How to Create Preload Images with jQuery in WordPress”

Add Comments (+)

1. Sebastian says:

   April 5, 2011 at 10:05

   I really like the idea. Although the looping is weird. Why not use an .each() and .first()? This would make the code much clearer.

   Reply
2. Avangelist says:

   April 11, 2011 at 09:36

   why isn’t it in a separate js file?

   Reply
3. Brett Widmann says:

   May 18, 2011 at 12:52

   This was really helpful! I hate waiting for images to load. Thanks for sharing.

   Reply
4. TreTans says:

   June 16, 2011 at 02:02

   Great Plugin.. Like it..

   Reply
5. Brad Trivers says:

   July 7, 2011 at 14:57

   Thanks for this tutorial! I was able to use the concept to “fix” the iThemes carousel plugin so that it doesn’t display until all images in the carousel are loaded.

   Reply
6. Roku Reviews says:

   December 14, 2011 at 22:14

   great tutorial. thanx for sharing

   Reply
7. dimas says:

   February 22, 2012 at 23:15

   how it call. when i go down on your site the image load just when they are on focus on the monitos how it calls?

   thanks

   http:www.openzona.com

   Reply
8. Tukang Coding says:

   April 20, 2012 at 01:10

   is there a plugin wordpress for it?

   Reply
   • Eko S. says:

     April 21, 2012 at 00:54

     Hi,
     We have a post about it, here: http://www.dynamicwp.net/articles-and-tutorials/wordpress-lazy-load-images-resources/

     Regards,

     Reply

Trackbacks/Pingbacks

1. 35 Exclusive JavaScript And jQuery Tutorials Of 2011 | stylishwebdesigner
2. Preload Images with Jquery | My Monkey Do
3. 54 jQuery Tutorials and How Tos
4. DownWP.com – 19 Useful Resources to Lazy Load Images in WordPress - DownWP.com