imagesloaded: tests

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);
+    });
+}