jQuery image loader

Load images asynchronously with ease. This plugin seeks for all images with data-src attributes inside a wrapper or run the plugin on an image tag itself.

The data attribute will be copied to the src attribute, which gives you loading & error events to streamline your flow.

Callbacks

callback description
imgLoadedClb Triggered when an image is loaded. ('this' is the loaded image)
allLoadedClb Triggered when all images are loaded. ('this' is the wrapper in which all images are loaded, or the image if you ran it on one image)
imgErrorClb Triggered when the image gives an error. Useful when you want to add a placeholder instead or remove it. ('this' is the loaded image)
noImgClb Triggered when there are no image found with data-src attributes, or when all images give an error. ('this' is the wrapper in which all images are loaded, or the image if you ran it on one image)
dataAttr The data attribute that contains the source. Default 'src'.

How to use?

HTML

<div class="images">
  <img data-src="link-to-image.jpg" alt="">
  <img data-src="link-to-image.jpg" alt="">
  <img data-src="link-to-image.jpg" alt="">
</div>

Javascript to load images inside wrapper

$('.images').loadImages({
  imgLoadedClb: function(){},
  allLoadedClb: function(){},
  imgErrorClb:  function(){},
  noImgClb:     function(){},
  dataAttr:     'src'
});

Javascript to load one image

$('.images img').first().loadImages({
  imgLoadedClb: function(){},
  allLoadedClb: function(){},
  imgErrorClb:  function(){},
  noImgClb:     function(){},
  dataAttr:     'src'
});
    

Examples

Load all images in div

Do it!

Load background images

Do it!

Fork me on GitHub