diff --git a/imagesloaded/imagesloaded-tests.ts b/imagesloaded/imagesloaded-tests.ts new file mode 100644 index 000000000..ad9d3a3db --- /dev/null +++ b/imagesloaded/imagesloaded-tests.ts @@ -0,0 +1,90 @@ +/// + +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); + }); +} diff --git a/imagesloaded/imagesloaded.d.ts b/imagesloaded/imagesloaded.d.ts new file mode 100644 index 000000000..31cd0b7a6 --- /dev/null +++ b/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 +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module ImagesLoaded { + type ElementSelector = Element | NodeList | Array | 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; + + // 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; +}