Preload images with jQuery Preload plugin

A jQuery plugin that preloads images

Description

There are times that we need to preload images to bring better user experience. You will not want your users to wait for 2 seconds when they hover their mouse over the navigation menu before the background image actually appears; or keep them waiting too long when they switch a slideshow. This plugin can also be useful when you want to add more images on the page through a ajax call.

Demo

• Click here to see the demo
• The demo page is also included in the source file

Download

• Download source code from Github

Requires

• jQuery 1.2.3+

Browser Compatibility

• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 10.6+
• Chrome 8+

Installation

• First, make sure you are using valid DOCTYPE
• Include nessesary JS files

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="path-to-file/jquery.preload.js"></script>

Usage

Example code:

      $.preload( '/img/space.gif',
        '/img/loading.gif',
        '/img/header-bg.png',
        '/img/avatar.jpg'
      );

This might be the simplest yet helpful plugin. It’s even shorter than this introduction. Enjoy it :)

Related posts