Themeforest

Create An Image Preloader For Image Swap Using jQuery

The following tutorial takes one of our earlier code snippets and improves it by adding a function to preload images.

The Quick and Easy jQuery Image Swap function offers a very simple way of implementing image change on hover for buttons, links, etc (see earlier post for more info). One problem however is that the first time the active image is called for a page there tends to be a delay as the new image loads.

One way to overcome this problem and ensure that the image swaps are more responsive is to preload all active versions of the images when the page downloads.

There are 2 parts to our jQuery code:

  • First we create our preload function, which will take an array of image file names and preload them when the page loads.
  • Then we create a function to create the image array by selecting all relevant images – i.e. the ones to be used in our image swap function. After selecting the images we then change the file names to those of the active images – i.e. swap “_off” for “_on” and store them in the array. This array can then be passed to the preload function.

1. jQuery Code – Preload Function

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

2. jQuery Code To Create The Image Array

$(document).ready(function() {
    // Declare the array variable
    var imgSwap = [];
    // Select all images used in the image swap function - in our case class "img-swap"
    $(".img-swap").each(function(){
        // Loop through all images which are used in our image swap function
        // Get the file name of the active images to be loaded by replacing _off with _on
        imgUrl = this.src.replace("_off","_on");
        // Store the file name in our array
        imgSwap.push(imgUrl);
    });
    // Pass the array to our preload function
    $(imgSwap).preload();
});

That’s basically it … a few lines of code, which will greatly enhance the performance of the image swap fuction.

In the following demo you can see the difference between a set of buttons using preload vs ones loading on hover:

Check Out The Preload Demo Download Source Code

6 Comments

  • $.fn.preload = function() {
    this.each(function(){
    $(”)[0].src = this;
    });
    }

    IE get’s an error on “$” as undefined. Am I missing something?

    Thanks.

    • Hi Leo – IE should work OK. Is the jQuery library loading?

  • I should have read the article with more detail, I see now how this is being used. My suggestion would then be to use image sprites instead :D

  • I played around with this idea before, and actually had something working. However my big draw back on this is! That it depends on “$(document).ready()”. Doesn’t this mean nothing happens until the page actually fully loads? I found the CSS based method of loading multiple image backgrounds better since the CSS is one of those first things to load, what do you think am I wrong in this assumption?

    • Hi,

      $(document).ready() means when the DOM is loaded, prior to actually loading the content into the browser window.

      I agree though that CSS with sprites should be used whenever possible. The jQuery solution is useful though for elements that arent fully supported in all browsers with the CSS :hover selector

  • [...] to our later blog post Create An Image Preloader For Image Swap Function Using jQuery for preload function to improve the image swap performance. [...]