Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Preload images with jQuery for smoother browsing

Saturday, March 24th, 2012 by Servage

JavaScript can improve your website in many ways, mainly for the user experience to get better. One of the smart things you can do, is to preload images in the background. You can drastically improve the users’ perception of load times by doing this. If images are already preloaded, only the HTML content needs to be fetched, and boom, the next page is displayed.

Preload selected images

Preloading is an advantage, but obviously it shouldn’t be overdone. The trick is to figure out which images to preload, and which to ignore. Try to figure out a logical browsing path through your website, and preload the images for the pages you think might be the next for the user.

Example

Check out the following code snippet forĀ a demo of preloading images with jQuery:

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)
Preload images with jQuery for smoother browsing, 4.0 out of 5 based on 3 ratings
Categories: Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.