Super simple Angular directive to wrap imagesLoaded plugin
$ bower install angular-images-loaded
Remember to include imagesloaded.pkgd.js
somewhere
angular.module('yourModule', [..., 'angular-images-loaded']);
app.controller('MyCtrl', function($scope) {
$scope.imgLoadedEvents = {
always: function(instance) {
// Do stuff
},
done: function(instance) {
angular.element(instance.elements[0]).addClass('loaded');
},
fail: function(instance) {
// Do stuff
}
};
});
Add directive to element, if using class method then class will be removed on load - useful for css transitions etc.
<div class="images-loaded">
<img src="kitten.jpg">
</div>
<div class="images-loaded: imgLoadedEvents;">
<img src="doge.jpg">
</div>
<div images-loaded="imgLoadedEvents">
<img src="kittens.jpg">
</div>