angular-images-loaded

Super simple Angular directive to wrap imagesLoaded plugin

Homepage

Angular Core Dependency: ~1.6.0

Module License: MIT

Added by: Sam Deering

GitHub

Repository

homerjam/angular-images-loaded

Stats

Stars: 29

Watchers: 29

Forks: 10

Author

James Homer
James Homer

Module Description

angular-images-loaded

Super simple Angular directive to wrap imagesLoaded plugin.

Demo

Installation

$ bower install angular-images-loaded

or

$ npm install angular-images-loaded

Usage

Remember to include imagesloaded.pkgd.js somewhere

Add module to your app dependencies

angular.module('yourModule', [..., 'angular-images-loaded']);

Register events in controller

app.controller('MyCtrl', function($scope) {
    var ctrl = this;

    ctrl.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

Note: If using class method then class will be removed on load - useful for css transitions etc.

<div class="images-loaded" images-loaded-events="ctrl.imgLoadedEvents">

    <img src="kitten.jpg">

</div>

<div class="images-loaded: ctrl.imgLoadedEvents;">

    <img src="doge.jpg">

</div>

<div images-loaded="ctrl.imgLoadedEvents">

    <img src="kittens.jpg">

</div>

Module stats last updated: 2017-03-19 16:00:05

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!