Efficient & Customizable jQuery Image Preload Plugin - Kyco Preloader

Efficient & Customizable jQuery Image Preload Plugin - Kyco Preloader
File Size: 23.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.