jQuery Plugin For Simple Image Preloader - Preload Images
File Size: | 68.4 KB |
---|---|
Views Total: | 5000 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Preload Images is a simple jQuery plugin for preloading an array of images with a custom GIF spinner and callback support.
How to use it:
1. Load the jQuery library and jQuery preload images plugin in the footer of the document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/preloadImages.js"></script>
2. Insert an image preloader in the document.
<div class="container"> <img src="img/spinner.gif" class="loading-images" /> </div>
3. Create an array of images you want to preload.
var arrayImages = new Array( "1.jpg", "2.jpg", "3.jpg", ... );
4. Call the plugin and append the images to an Html element with fade-in effect.
preloadImage({ images: arrayImages, callback: function() { $('.loading-images').fadeOut(2000).remove(); $.each( arrayImages, function(index,value){ var img = $('<img class="dynamic">'); img.attr('src', value); img.prependTo('.container').hide().fadeIn(2000); }); } });
Change log:
v0.2 (2014-03-25)
- updates
This awesome jQuery plugin is developed by paallaire. For more Advanced Usages, please check the demo page or visit the official website.