Efficient & Customizable jQuery Image Preload Plugin - Kyco Preloader

Kyco Preloader is an efficient & customizable jQuery image preloader plugin that allows to preload your images with a progress bar and loading text.

Features:

• Animated progress bar with percentage display.
• Supports preload local images, CSS background and cross-domain resources.
• Supports preload images sequentially.
• Custom loading text messages.
• Supports progress animation and preloader fadeout animation.

Basic Usage:

1. Include the latest version of jQuery library in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Include the jQuery Kyco Preloader plugin's javascript and CSS in the document.

<script src="jquery.kyco.preloader.min.js"></script>
<link rel="stylesheet" href="jquery.kyco.preloader.css">

3. Wrap the image in a container where you want to preload your images.

<div class="demo">
<img src="images/01.jpg">
<img src="images/02.jpg">
<img src="images/03.jpg">
...
</div>

4. Enable the image preloader by calling the plugin on the container you create.

<script>
$(document).ready(function() {
$('.demo').kycoPreload();
});
</script>

5. Options and defaults.

preloadSelector: true,
// if set to true will preload the selector's background image, note that the image
// will show as soon as it is loaded and not only once the preloader is done loading
truePercentage: true,
// NOTE: does not work with cross-domain calls
// if set to true will get the actual (compressed) file size of all the images instead of
// just looking at the number of images loaded divided by the total number of images
disableOverlay: false,
// if set to true will not create the blocking overlay
showInContainer: false,
// if set to true will load the preloader inside the selector element instead of
// across the whole page
hideBackground: false,
// NOTE: hideBackground is an option for when showInContainer is set to true
// if set to true will hide the css background-image of the selector element
hideNonImageElements: false,
// if set to true will hide all elements of the selector, not only the images
progressiveReveal: false,
// NOTE: if hideNonImageElements is set to true then progessiveReveal might not
// return the expected result because the image element's parent might be hidden
// if set to true will show images as soon as they are preloaded
forceSequentialLoad: false,
// Will force images to load in the order they appear in the DOM, this can potentially
// increase the load time because images won't start loading in parallel
silentMode: false,
// if set to true will hide the preloader
debugMode: false,
// if set to true will show errors
useOpacity: false,
// if set to true will use opacity property to hide elements instead of display property
hidePercentage: false,
// if set to true will not show the percentage numbers while loading
loaderText: 'loading images, please wait...',
// set the text of the loading message
animateDuration: 0,
// set the duration in milliseconds for each progress animation
fadeOutDuration: 100,
// set the duration in milliseconds for the preloader fadeout animation
showImagesBeforeComplete: true,
// if set to false will wait for the animation of the preloader fadeout to complete
// before showing the images
afterEach: function() {},
// called once after every image load
beforeComplete: function() {},
// called once after all images have been loaded and before the fadeout animation of the
// preloader triggers
onComplete: function() {}
// called once after all images have been loaded and all preloader animations have completed

Changelog:

2018-11-05

• Update to be compatible with latest jQuery.

2014-09-02

• Added dynamic trickle, i.e. gracefully slow down loader animation the closer it gets to the actual value.

---

This awesome jQuery plugin is developed by kyco. For more Advanced Usages, please check the demo page or visit the official website.