Powerful Image Preload Plugin - jQuery preload.js

preload.js is a tiny yet robust jQuery plugin for preloading a sequence of large images before loading them into the DOM.

The plugin currently comes with 4 preload modes to meet your specific design needs:

• Link: preload image links within the document.
• URL: preload an array of image paths you specify.
• Rollover: find and replace images.
• Placeholder: show placeholders before images are loaded.

How to use it:

1. Insert the minified version of the jQuery preload.js plugin after jQuery library and we're ready to go.

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

2. Preload image links within a specific container (Link mode).

<div id="example">
  <a href="1.jpg">Iamge link</a>
</div>

$.preload( '#images a' );
// or 
$('#images a').preload();

3. Preload an array of images. (URL mode).

$.preload([ '1', '2', '3' ], {
  base:'/', // based url
  ext:'.jpg' //  file extension
});

4. Rollover images when they're completely loaded (Rollover mode).

$.preload( 'img', {
  find: '.jpg',
  replace: '_alt.jpg'
});

// or

$('img').preload({
  find: '.jpg',
  replace: '_alt.jpg'
});

5. Display a placeholder until the image is completely loaded (Placeholder mode).

{
  /* data: 
    loaded: how many images were preloaded successfully.
    failed: how many images failed the preloading.
    next: 0-based index of the next image to preload.
    done: amount of preloaded images ( loaded + failed ).
    found: whether the last image could be preloaded or not.
    total: amount of images to preload overall.
    image: URL of the related image.
    original: The original source related to this image.
  */

  // callback called every time a new url is requested
  onRequest:function( data ){ // ... }, 

  // called every time a response is received(successful or not)
  onComplete:function( data ){ // ... }, 

  // called after all the images were loaded(or failed)
  onFinish:function( data ){ // ... } 

}

---

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