Servage Magazine

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)