How to Create Preload Images with jQuery in WordPress

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.

create image preloader with jquery in wordpress

You may be interested in other customized twentyten theme tutorial:

jQuery Image Gallery Plugins

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):

Create jQuery Image Preloader in WordPress

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:

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

  2. Avangelist says:

    why isn’t it in a separate js file?

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

  4. TreTans says:

    Great Plugin.. Like it.. ;)

  5. Brad Trivers says:

    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.

  6. Roku Reviews says:

    great tutorial. thanx for sharing

  7. dimas says:

    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

  8. is there a plugin wordpress for it?

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

Leave a Reply

 

Amazingly Beautiful WordPress Themes