🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

imgLoading is a lightweight jQuery plugin that allows you to trigger specified events based on the current status of image loading (start, progress and end).

image-loading

Documentation

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.


You May Also Like