Image Soft Load

See the DEMO

Animate your freshly loaded images or replace them if the image is not found !

while loading	When image not found

Classes

angular-img-onload add classes, describing the state of the image.

class	DOM target	description
.img-onload	img's parent	Added when the image is loading, then removed when successfully loaded
.img-onload-error	img's parent	Added when an error (i.e. 404) occured

Install

bower install https://github.com/marg51/angular-img-onload.git#0.0.2

add bower_components/angular-img-onload/dist/angular-img-onload.js to your files

Load the module via AngularJS

var MyApp = angular.module('MyApp', ['uto.img-onload']);

Each <img> with the attribute ng-src will be affected.

Replace a broken image

	app.config(function(imgOnloadProvider) {
    	imgOnloadProvider.setImage("http://path/to/new/image");
	});

Add your own css

examples of css

Easy solution

img {
	display: inline;
}
div.img-onload img,
div.img-onload-error img {
	display: none;
}

Transition

img {
	transition: all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;
	opacity: 1;
}
div.img-onload img,
div.img-onload-error img {
	opacity: 0;
}

Run the demo

npm install
bower install
grunt

and go to /public/index.html

License

MIT