https://github.com/dkern/jquery.prefetch
Prefetch is a lightweight image, list and background preloader.
https://github.com/dkern/jquery.prefetch
background-preloader javascript jquery jquery-plugin jquery-prefetch prefetch preload preload-images preloader preloading
Last synced: 2 months ago
JSON representation
Prefetch is a lightweight image, list and background preloader.
- Host: GitHub
- URL: https://github.com/dkern/jquery.prefetch
- Owner: dkern
- Created: 2015-03-24T16:43:35.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2020-07-24T11:42:41.000Z (over 5 years ago)
- Last Synced: 2025-04-11T21:35:12.473Z (10 months ago)
- Topics: background-preloader, javascript, jquery, jquery-plugin, jquery-prefetch, prefetch, preload, preload-images, preloader, preloading
- Language: JavaScript
- Size: 13.7 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## jQuery Prefetch - Lightweight Image and Background Preloader
[](http://github.com/dkern/jquery.prefetch)
[](https://david-dm.org/dkern/jquery.prefetch)
---
## 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](http://jquery.com) 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](http://raw.githubusercontent.com/dkern/jquery.prefetch/master/jquery.prefetch.js) or the [minified](http://raw.githubusercontent.com/dkern/jquery.prefetch/master/jquery.prefetch.min.js) version.
```HTML
```
#### Package Managers
Prefetch is even available through [NPM](http://npmjs.org) and [Bower](http://bower.io). Just use one of the following commands below.
[](http://www.npmjs.org/package/jquery-prefetch)
[](http://bower.io/search/?q=jquery-prefetch)
[](https://nodei.co/npm/jquery-prefetch/)
```
$ 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:
```HTML
```
```JS
$("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:
```JS
$.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:
```JS
// 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:
```JS
$.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:
```JS
// 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](http://github.com/dkern/jquery.prefetch/issues) bugs and feel free to [ask](http://github.com/dkern/jquery.prefetch/issues) for new features directly on GitHub.
## License
Prefetch is dual-licensed under [MIT](http://www.opensource.org/licenses/mit-license.php) and [GPL-2.0](http://www.gnu.org/licenses/gpl-2.0.html) license.