jQuery-imgLoading
A simple lighweight plugin to get image loading events (start, progress, end).
Simple use
Simply trigger action when all images in container are loaded :
$('#container img').imgLoading(function(){ // action ! alert('loaded !'); });
Advanced use
You can easily bind the loading start, progress and end events if you need to :
$('#container').imgLoading({ start: function(e, data){ // start action }, progress: function(e, data){ // progress }, end: function(e, data){ // end } });
Events details
Every event comes with :
- data.loaded - the currently loaded images count
- data.total - total images count
Now you can do whatever you want during loading, say displaying the loadign status :
$('#container').imgLoading({ progress: function(e, data){ // display progress $('#container .loader').html('Now loading : '+data.loaded+'/'+data.total); }, end: function(e, data){ // ended ! hide the progress display $('#container .loader').remove(); } });
You may display a progress bar using the percentage of loaded images, etc.