Merge branch 'coldacid-imagesloaded'

imagesloaded/imagesloaded-tests.ts

@@ -0,0 +1,90 @@
+/// <reference path="imagesLoaded.d.ts" />
+
+function test_ctor() {
+  // element
+  imagesLoaded(document.querySelector('#container'), function(instance) {
+    console.log('all images are loaded');
+  });
+
+  // selector string
+  imagesLoaded('#container', function() { console.log('all images are loaded'); });
+
+  // multiple elements
+  var posts = document.querySelectorAll('.post');
+  imagesLoaded(posts, function() { console.log('all images are loaded'); });
+}
+
+function test_events_basic() {
+  var elem = document.querySelector('body');
+  var imgLoad = imagesLoaded(elem);
+  function onAlways(instance: ImagesLoaded.ImagesLoaded) {
+    console.log('all images are loaded');
+  }
+
+  // bind with .on()
+  imgLoad.on('always', onAlways);
+  // unbind with .off()
+  imgLoad.off('always', onAlways);
+}
+
+function test_events_full() {
+  var elem = document.querySelector('body');
+  var imgLoad = imagesLoaded(elem);
+
+  // always
+  imgLoad.on('always', function(instance) {
+    console.log('ALWAYS - all images have been loaded');
+  });
+
+  // done
+  imgLoad.on('done', function(instance) {
+    console.log('DONE - all images have been successfully loaded');
+  });
+
+  // fail
+  imgLoad.on('fail', function(instance) {
+    console.log('FAIL - all images loaded, at least one is broken');
+  });
+
+  // progress
+  imgLoad.on('progress', function(instance, image) {
+    var result = image.isLoaded ? 'loaded' : 'broken';
+    console.log('image is ' + result + ' for ' + image.img.src);
+  });
+}
+
+function test_always_images() {
+  var imgLoad = imagesLoaded('#container');
+  imgLoad.on('always', function() {
+    console.log(imgLoad.images.length + ' images loaded');
+    // detect which image is broken
+    for (var i = 0, len = imgLoad.images.length; i < len; i++) {
+      var image = imgLoad.images[i];
+      var result = image.isLoaded ? 'loaded' : 'broken';
+      console.log('image is ' + result + ' for ' + image.img.src);
+    }
+  });
+}
+
+function test_jquery() {
+  $('#container').imagesLoaded(function() {
+    console.log('images have loaded');
+  });
+}
+
+function test_jquery_deferred() {
+  $('#container').imagesLoaded()
+    .always(function(instance) {
+      console.log('all images loaded');
+    })
+    .done(function(instance) {
+      console.log('all images successfully loaded');
+    })
+    .fail(function() {
+      console.log('all images loaded, at least one is broken');
+    })
+    .progress(function(instance, image) {
+      var result = image.isLoaded ? 'loaded' : 'broken';
+      console.log('image is ' + result + ' for ' + image.img.src);
+    });
+}

imagesloaded/imagesloaded.d.ts

@@ -0,0 +1,53 @@
+// Type definitions for imagesLoaded 3.1.8+
+// Project: https://github.com/desandro/imagesloaded
+// Definitions by: Chris Charabaruk <http://github.com/coldacid>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+///<reference path="../jquery/jquery.d.ts" />
+
+declare module ImagesLoaded {
+  type ElementSelector = Element | NodeList | Array<Element> | string;
+
+  /** interface for an image currently loading or completed */
+  interface LoadingImage {
+    img: HTMLImageElement;
+    isLoaded: boolean;
+  }
+
+  interface ImagesLoadedCallback {
+    (instance?: ImagesLoaded): void;
+  }
+
+  interface ImagesLoadedListener {
+    (instance: ImagesLoaded, image?: LoadingImage): void;
+  }
+
+  interface ImagesLoaded {
+    new (elem: ElementSelector, callback: ImagesLoadedCallback): ImagesLoaded;
+
+    images: Array<LoadingImage>;
+
+    // event listeners
+    on(event: string, listener: ImagesLoadedListener): void;
+    off(event: string, listener: ImagesLoadedListener): void;
+  }
+
+  interface ImagesLoadedConstructor {
+    /**
+     * Creates a new ImagesLoaded object with the provided callback
+     * @param elem Element, NodeList, Element array, or selector string for images to watch
+     * @param callback function triggered after all images have been loaded
+     */
+    (elem: ElementSelector, callback?: ImagesLoadedCallback): ImagesLoaded;
+  }
+}
+
+declare var imagesLoaded: ImagesLoaded.ImagesLoadedConstructor;
+
+declare module 'imagesloaded' {
+  export = imagesLoaded;
+}
+
+interface JQuery {
+  imagesLoaded(callback?: ImagesLoaded.ImagesLoadedCallback): JQueryDeferred<ImagesLoaded.ImagesLoaded>;
+}