jQuery plugin to async load images through a data-src attribute.
Ruby CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
.gitignore
MIT-LICENSE.txt
README.md
Thorfile
bower.json
image-loader.jquery.json
jquery-image-loader.js

README.md

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-src attribute will be copied to the src attribute, which gives you enough feedback to get a good grip on the situation.

Callbacks

  • 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 a 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'
});

Demo time!

http://mrhenry.github.com/jquery-image-loader/public/