Easy Image Preloader With Callback Support - jQuery img-preload

img-preload is a simple, lightweight jQuery image preloading plugin which can be used to display a loading screen while preloading several large images in your html document.

How to use it:

1. Load the JavaScript file 'preload.js' after loading jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/preload.js"></script>

2. Define an array of images you want to preload.

var imgs = [
    '1.jpg',
    '2.jpg',
    '3.jpg',
    ...
];

3. Initialize the img-preload and you're done.

$.preload(imgs)

4. Create a image preloading screen using the 'each' and 'done' callback functions.

<div class="loading">
  <div class="progress">0%</div>
</div>

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #eee;
  text-align: center;
  font-size: 30px
}

.progress { margin-top: 300px; }

var index = 0,
len = imgs.length,
$progress = $('.progress');

$.preload(imgs, {
  each: function (count) {
    $progress.html(Math.round((count, +1) / len * 100) + '%');
  },
  all: function () {
    $('.loading').hide();
    document.title = '1/' + len;
  }
})

---

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