jp

jquery-prefetch

Prefetch is a lightweight image, list and background preloader.

Showing:

Popularity

Downloads/wk

28

GitHub Stars

4

Maintenance

Last Commit

1yr ago

Contributors

1

Package

Dependencies

1

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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:

NameTypeDefaultDescription
chainablebooleantrueby default Prefetch is chainable and will return all elements, if set to false it will return the created plugin instance itself for further use
startAutomaticallybooleantruedetermine to automatically start loading images if available on initialization
delayinteger0time in milliseconds to wait after initialization before loading images
simultaneousinteger3amount of images should be loaded simultaneously, zero means no limit
objectPropertystring"image"name of the property of passed object to look for image source
imagesBasePathstringnulloptional base path where images are located, will be prepend on all image sources
onStartLoadingfunctionnulloptional callback, triggered when loading starts (parameter: prefetch instance)
getImageSourcefunctionfunctioncallback to generate the used image source string, can be overwritten to create a custom source generation (parameter: image source, prefetch instance / return: string)
onImageLoadedfunctionnulloptional callback, triggered when a single image was loaded (parameter: image source, prefetch instance)
onImageErrorfunctionnulloptional callback, triggered when a single image could not be loaded (parameter: image source, prefetch instance)
onAbortLoadingfunctionnulloptional callback, triggered when the loading was aborted while loading with stop or destroy function (parameter: prefetch instance)
onAllLoadedfunctionnulloptional 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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial