have attribute when image is loaded

README.md

@@ -33,6 +33,8 @@ The attributes are using the [srcset](http://picture.responsiveimages.org/) setu
    * '{"className": "own-classname-image"}' className will be apended to the image
 - "class" : `afkl-lazy-wrapper` will use height 0 trick, `afkl-img-ratio-1-1` sets correct aspect ratio so container is 100% responsive as well (optional, include css)
 - Using directive `afkl-image-container` to have a scrollable container
+- Attribute `afklLazyImageLoaded` will be set when first image is really loaded. This can be used if you want to preload every image before showing your app.
+
 
 ## Todo
 1. Angular directives don't have any notion of style encapsulation, but Angular is expected to incorporate that functionality eventually. At the moment our optional css is delivered in an own stylesheet.

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "ng-directive-lazy-image",
   "main": "release/lazy-image.js",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "homepage": "https://github.com/afklm/ng-lazy-image",
   "authors": [
     "KLM Royal Dutch Airlines",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-lazy-image",
   "main": "./release/lazy-image.js",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "homepage": "http://afklm.github.io/ng-lazy-image/",
   "repository": {
     "type": "git",

release/lazy-image.js

@@ -352,6 +352,8 @@ angular.module('afkl.lazyImage')
                     IMAGECLASSNAME = IMAGECLASSNAME + ' ' + options.className;
                 }
 
+                attrs.afklLazyImageLoaded = false;
+
                 var _containerScrollTop = function () {
                     // See if we can use jQuery, with extra check
                     // TODO: check if number is returned
@@ -466,7 +468,11 @@ angular.module('afkl.lazyImage')
                 _checkIfNewImage();
 
                 var _loaded = function () {
+
+                    attrs.$set('afklLazyImageLoaded', true);
+
                     element.removeClass(LOADING);
+
                 };
 
 

sample/index.html

@@ -159,7 +159,7 @@ <h3>Using image alt and className</h3>
 	<!-- example how to use image set using srcset and ratio -->
 	<div ng-repeat="image in images">
 
-		<div afkl-lazy-image="//placehold.it/768x384/00a1de/ffffff" class="afkl-lazy-wrapper afkl-img-ratio-2-1" afkl-lazy-image-options='{"alt": "blue bird", "className": "optional-image-class"}'></div>
+		<div sample-count afkl-lazy-image="//placehold.it/768x384/00a1de/ffffff" class="afkl-lazy-wrapper afkl-img-ratio-2-1" afkl-lazy-image-options='{"alt": "blue bird", "className": "optional-image-class"}'></div>
 
 	</div>
 
@@ -208,10 +208,10 @@ <h3>Runtime image change after loaded</h3>
 	<div afkl-lazy-image="{{runtimeImageSrc}}" class="demo-no-use-of-aspect-ratio"></div>
 	<button ng-click="changeImage()">Change Now</button>
 
-<!--
-	<h3>Check if image has been loaded</h3>
-	<div sample afkl-lazy-image="//placehold.it/300x300/00a1de/ffffff" class="demo-no-use-of-aspect-ratio"></div>
--->
+
+	<h3>Check if image has been loaded (attribute 'afklLazyImageLoaded' will be set to true)</h3>
+	<div sample-count afkl-lazy-image="//placehold.it/300x300/00a1de/ffffff" class="demo-no-use-of-aspect-ratio"></div>
+
 
 
 	<p class="demo-link"><a href="#" ng-click="destroy()">Destroy $scope</a> (no leaks)</p>

sample/js/app.js

@@ -3,6 +3,8 @@
     angular.module('sample-app', ['afkl.lazyImage'])
     .controller('appCtrl', ['$scope', function mainCtrl($scope) {
 
+        $scope.count = 0;
+
         $scope.images = [
             {
                 srcset: '//placehold.it/480x240/00a1de/ffffff 480w, //placehold.it/768x384/00a1de/ffffff 768w',
@@ -22,21 +24,20 @@
 
         $scope.changeImage();
 
+
     }])
-    .directive('sample', function () {
+    .directive('sampleCount', function () {
         'use strict';
+        var count = 0;
 
         return {
             restrict: 'A',
-            link: function ($scope, $element, $attrs) {
-
-                $attrs.$observe('afklLazyImageLoaded', function (newValue) { 
-                    if (window.console && newValue) {
-                        window.console.log('IMAGE HAS BEEN LOADED');
+            link: function (scope, element, attrs) {
+                return attrs.$observe("afklLazyImageLoaded", function (value) {
+                    if (window.console) {
+                        window.console.log('IMAGE LOADED:', value);
                     }
                 });
-
-
             }
         };
 

src/lazy-image.directive.js

@@ -53,6 +53,8 @@ angular.module('afkl.lazyImage')
                     IMAGECLASSNAME = IMAGECLASSNAME + ' ' + options.className;
                 }
 
+                attrs.afklLazyImageLoaded = false;
+
                 var _containerScrollTop = function () {
                     // See if we can use jQuery, with extra check
                     // TODO: check if number is returned
@@ -167,7 +169,11 @@ angular.module('afkl.lazyImage')
                 _checkIfNewImage();
 
                 var _loaded = function () {
+
+                    attrs.$set('afklLazyImageLoaded', true);
+
                     element.removeClass(LOADING);
+
                 };