Git Product home page Git Product logo

angular-images-loaded's Introduction

angular-images-loaded

Super simple Angular directive to wrap imagesLoaded plugin.

Demo

Installation

$ bower install angular-images-loaded

or

$ npm i -D angular-images-loaded

Usage

Remember to include imagesloaded.pkgd.js somewhere.

Add module to your app dependencies

angular.module('yourModule', [..., 'hj.imagesLoaded']);

Register events in controller

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

	$scope.$on('imagesLoaded:loaded', function(event, element){
		console.log('loaded', element);
	});

	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 images-loaded="ctrl.imgLoadedEvents"
	images-loaded-watch="vm.image"
	images-loaded-options="{ background: true }">

	<div ng-style="{ backgroundImage: 'url(' + vm.image + ')' }">

</div>

License

MIT

angular-images-loaded's People

Contributors

dphrag avatar homerjam avatar jakobloekke avatar liorur avatar npmcdn-to-unpkg-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

angular-images-loaded's Issues

events fire before images have loaded

images of a container are still loaded but the event already fired.

using angular 1.4.8
imagesloaded 4.1.0
and latest of this directive.

happens on dev, on prod both chrome and safari

Please Add to NPM

Please add your directive to npm this way it can easily be used with things like browserify.

RequireJS path doesn't load the imagesLoaded factory

We are using Require JS to lazily load modules into application. This works like a beauty but it seems that your module uses imagesloaded.js which uses Require as well and simply returns the factory.

Something needs to happen here. We had to manually assign the factory globally (because your module doesn't use Require) so that your module can see it.

Either update your documentation to include Require (which I can provide a few ideas/snippets) or bounce the idea of on require of imageloaded.js then it is loaded in to the window.

applicaiton.js
define(['...', '...', 'imagesLoaded'], function (..., ..., imagesLoaded) {
window.imagesLoaded = imagesLoaded;
}

Any ideas?

Exception when embedding old jQuery-Version (<1.5)

We have an angular app which is embedded on some clients' pages; Some of them do include an old jQuery-Version (<1.5) which causes the imagesLoaded-Module to break further JS-Execution as it tries to call 'Deferred' on the window.jQuery-Object; Deferred() was implemented to jQuery in v1.5;

As the angular app is embedded to foreign pages we have no control over the jQuery-Version. Could you check if the Deferred()-Method is defined before calling it or otherwise check the jQuery Version before using it to prevent such errors?

Thank you in advance

Hi

I have a slider where iam using your images loaded. Problem is its only track the first time.
There was a way to trigger it manualy ?

Loading statement

How do I make a "loading" effect of image, that is shown in imagesloaded.

Issue with ng data binding

Example:
<img class="ng-cloak" ng-cloak ng-src="{{currentState().src}}" images-loaded="imgLoadedEvents">

When I call a function that updates the {{currentState().src}} data to request a new image, none of the events fire. Is this an issue or is there a proposed solution I'm overlooking?

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.