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.
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:
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>Prefetch is even available through NPM and Bower. Just use one of the following commands below.
$ npm install jquery-prefetch
$ bower install jquery-prefetch
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();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");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();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";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";
}});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) |
Please report bugs and feel free to ask for new features directly on GitHub.