Skip to content

Prefetch is a lightweight image, list and background preloader.

Notifications You must be signed in to change notification settings

dkern/jquery.prefetch

Repository files navigation

jQuery Prefetch - Lightweight Image and Background Preloader

GitHub version Dependency version


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 version Bower version

NPM

$ 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.