jQuery Prefetch - Lightweight Image and Background Preloader

About jQuery Prefetch

Prefetch is a lightweight image, list and background preloader for jQuery. Just give them a list of images or elements and the plugin will load every image for you.

Download & Installation

First of all, you will need jQuery to use Prefetch successfully on your project! If you get this you can install Prefetch by different ways. Some examples below:

Self-Hosted

Download and save one of two available files to include Prefetch to your page, either the development or the minified version.

<script type="text/javascript" src="jquery.prefetch.min.js"></script>

Package Managers

Prefetch is even available through NPM and Bower. Just use one of the following commands below.

$ npm install jquery-prefetch
$ bower install jquery-prefetch

Load Images or Backgrounds

Just select a bunch of elements with jQuery and pass them to Prefetch, the Plugin does the rest for you:

<!-- images -->
<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />

<!-- backgrounds -->
<div style="background: url(images/1.jpg);" ></div>
<div style="background: url(images/2.jpg);" ></div>
<div style="background: url(images/3.jpg);" ></div>

$("img, div").Prefetch();

Load a List of Images

Prefetch is even able to load a list of images directly. Pass an array, object or a simple string to load everything:

$.Prefetch(["images/1.jpg", "images/2.jpg", "images/3.jpg"]);
$.Prefetch([{image: "images/1.jpg"}, {image: "images/2.jpg"}, {image: "images/3.jpg"}]);
$.Prefetch({key1: {file: "images/1.jpg"}, key2: {file: "images/2.jpg"}}, {objectProperty: "file"});
$.Prefetch("images/1.jpg");

Use Prefetch the manually way

The Prefetch-Object can be used in a manual manner or to control its behavior:

// use public function directly or chained
var preload = $.Prefetch();
preload.addImage(["images/1.jpg", "images/2.jpg", "images/3.jpg"]);
preload.addImage("images/4.jpg")
       .addImage("images/5.jpg")
       .start();

Configuration

The configuration can be changed directly in the constructor or manually on a Prefetch instance:

$.Prefetch(["images/1.jpg", "images/2.jpg", "images/3.jpg"], {delay: 1000});
$("img, div").Prefetch({delay: 1000});

var preload = $.Prefetch();
preload.configuration.objectProperty = "file";

Automatically create Image Source

There will be three possibilies to pass the image source strings to the Plugin. As a simple array/object, with a relative image folder path or within a custom generation function. These examples below will all load the same images:

// load as simple list
$.Prefetch(["images/1.jpg", "images/2.jpg", "images/3.jpg"]);

// load with image base path
$.Prefetch(["1.jpg", "2.jpg", "3.jpg"], {imagesBasePath: "images/"});

// load with custom source generation
$.Prefetch(["1", "2", "3"], {getImageSource: function(source) {
	return "images/" + source + ".jpg";
}});

Parameter

The following configurations is available by default:

Name | Type | Default | Description ------------------ | ---------- | ---------- | ----------- chainable | boolean | true | by default Prefetch is chainable and will return all elements, if set to false it will return the created plugin instance itself for further use startAutomatically | boolean | true | determine to automatically start loading images if available on initialization delay | integer | 0 | time in milliseconds to wait after initialization before loading images simultaneous | integer | 3 | amount of images should be loaded simultaneously, zero means no limit objectProperty | string | "image" | name of the property of passed object to look for image source imagesBasePath | string | null | optional base path where images are located, will be prepend on all image sources onStartLoading | function | null | optional callback, triggered when loading starts (parameter: prefetch instance) getImageSource | function | function | callback to generate the used image source string, can be overwritten to create a custom source generation (parameter: image source, prefetch instance / return: string) onImageLoaded | function | null | optional callback, triggered when a single image was loaded (parameter: image source, prefetch instance) onImageError | function | null | optional callback, triggered when a single image could not be loaded (parameter: image source, prefetch instance) onAbortLoading | function | null | optional callback, triggered when the loading was aborted while loading with stop or destroy function (parameter: prefetch instance) onAllLoaded | function | null | optional callback, triggered when all images was loaded (parameter: prefetch instance)

Bugs / Feature request

Please report bugs and feel free to ask for new features directly on GitHub.

License

Prefetch is dual-licensed under MIT and GPL-2.0 license.