Image preloader based on jQuery


  • onDone : function()
  • onEachLoad : function(img)

  • onLoadError : function(img)– called when an image was not succefully loaded
  • fadeIn : int(default 500) – time of fadein
  • delay : int(default 100) – time between showing next image
  • interval : int(default 200) – time between next check if any of images is loaded
  • parentWrap : string(default ‘a’) – just needed 😛
  • loader : string(default ‘img/loader.gif’) – path to loader image

Basic usage

We just need to specify element in wich we want to preload images.


You also need an image loader like this: If you don’t like this one, you also can look on this site When you got your lovely loader you have to set path to it like this:

$('#gallery').preloader({loader: 'path/to/loader/loader.gif'});

Function usage

Just 3 short codes to show how each function works. Check console for output.

$('#gallery').preloader({onDone: function() {
  console.log('All images loaded succesfull');
$('#gallery').preloader({onEachLoad: function(e) {
  console.log(e.attr('src')+' was loaded succesfully!');
$('#gallery').preloader({onLoadError: function(e) {
  e.replaceWith($('<p>This image was not loaded succesfully!</p>'));

Leave a comment