jQuery Plugin To Handle Element Loading Progress - Loader

nite-preloader is a jQuery plugin to handle the loading progress of 'Heavy' html elements such as images, audios and videos. Also has the ability to lazy load these medias and to auto play videos/audios when completely loaded. Ideal for asynchronous web applications.

How to use it:

1. To get started, include the latest jQuery library and the jQuery nite-preloader plugin's script in your page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.nite.preloader.js"></script>

2. Embed your own image, video or audio elements into the page using the data-nite-src attribute as these:

<img data-nite-src="1.jpg">

<video autoplay muted loop class="target">
  <source data-nite-src="1.mp4" type="video/mp4">
  <source data-nite-src="1.ogg" type="video/ogg">
</video>

3. Initialize the plugin and we're ready to go.

$('.container').nitePreload();

4. Plugin's default configuration options.

$('.container').nitePreload({

  // default attribute
  srcAttr       : 'data-src',
  srcsetAttr    : 'data-srcset',
  
  // loads element when visible
  visible       : false,

  // sequential loading
  sequential    : false,

  // shows backgrounds
  backgrounds   : false,

  // extra attibutes
  extraAttrs    : [],

  // autoplay on load
  playthrough   : false
  
});

5. Possible callback functions to handle the loading progress.

$('.container').nitePreload({

  onComplete: function onComplete(instance, resources) {
    // ...
  },

  onProgress: function onProgress(instance, resource) {
    // ...
  },

  onLoad: function onLoad(instance, resource) {
    // ...
  },
  
  onError: function onError(instance, resource) {

    // ...
  }

});

Changelog:

2018-12-24

• v1.5.0: code improvement

---

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