123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370 |
- /*!
- * imagesLoaded v4.1.3
- * JavaScript is all like "You images are done yet or what?"
- * MIT License
- */
- ( function( window, factory ) { 'use strict';
- // universal module definition
- /*global define: false, module: false, require: false */
- if ( typeof define == 'function' && define.amd ) {
- // AMD
- define( [
- 'ev-emitter/ev-emitter'
- ], function( EvEmitter ) {
- return factory( window, EvEmitter );
- });
- } else if ( typeof module == 'object' && module.exports ) {
- // CommonJS
- module.exports = factory(
- window,
- require('ev-emitter')
- );
- } else {
- // browser global
- window.imagesLoaded = factory(
- window,
- window.EvEmitter
- );
- }
- })( typeof window !== 'undefined' ? window : this,
- // -------------------------- factory -------------------------- //
- function factory( window, EvEmitter ) {
- 'use strict';
- var $ = window.jQuery;
- var console = window.console;
- // -------------------------- helpers -------------------------- //
- // extend objects
- function extend( a, b ) {
- for ( var prop in b ) {
- a[ prop ] = b[ prop ];
- }
- return a;
- }
- // turn element or nodeList into an array
- function makeArray( obj ) {
- var ary = [];
- if ( Array.isArray( obj ) ) {
- // use object if already an array
- ary = obj;
- } else if ( typeof obj.length == 'number' ) {
- // convert nodeList to array
- for ( var i=0; i < obj.length; i++ ) {
- ary.push( obj[i] );
- }
- } else {
- // array of single index
- ary.push( obj );
- }
- return ary;
- }
- // -------------------------- imagesLoaded -------------------------- //
- /**
- * @param {Array, Element, NodeList, String} elem
- * @param {Object or Function} options - if function, use as callback
- * @param {Function} onAlways - callback function
- */
- function ImagesLoaded( elem, options, onAlways ) {
- // coerce ImagesLoaded() without new, to be new ImagesLoaded()
- if ( !( this instanceof ImagesLoaded ) ) {
- return new ImagesLoaded( elem, options, onAlways );
- }
- // use elem as selector string
- if ( typeof elem == 'string' ) {
- elem = document.querySelectorAll( elem );
- }
- this.elements = makeArray( elem );
- this.options = extend( {}, this.options );
- if ( typeof options == 'function' ) {
- onAlways = options;
- } else {
- extend( this.options, options );
- }
- if ( onAlways ) {
- this.on( 'always', onAlways );
- }
- this.getImages();
- if ( $ ) {
- // add jQuery Deferred object
- this.jqDeferred = new $.Deferred();
- }
- // HACK check async to allow time to bind listeners
- setTimeout( function() {
- this.check();
- }.bind( this ));
- }
- ImagesLoaded.prototype = Object.create( EvEmitter.prototype );
- ImagesLoaded.prototype.options = {};
- ImagesLoaded.prototype.getImages = function() {
- this.images = [];
- // filter & find items if we have an item selector
- this.elements.forEach( this.addElementImages, this );
- };
- /**
- * @param {Node} element
- */
- ImagesLoaded.prototype.addElementImages = function( elem ) {
- // filter siblings
- if ( elem.nodeName == 'IMG' ) {
- this.addImage( elem );
- }
- // get background image on element
- if ( this.options.background === true ) {
- this.addElementBackgroundImages( elem );
- }
- // find children
- // no non-element nodes, #143
- var nodeType = elem.nodeType;
- if ( !nodeType || !elementNodeTypes[ nodeType ] ) {
- return;
- }
- var childImgs = elem.querySelectorAll('img');
- // concat childElems to filterFound array
- for ( var i=0; i < childImgs.length; i++ ) {
- var img = childImgs[i];
- this.addImage( img );
- }
- // get child background images
- if ( typeof this.options.background == 'string' ) {
- var children = elem.querySelectorAll( this.options.background );
- for ( i=0; i < children.length; i++ ) {
- var child = children[i];
- this.addElementBackgroundImages( child );
- }
- }
- };
- var elementNodeTypes = {
- 1: true,
- 9: true,
- 11: true
- };
- ImagesLoaded.prototype.addElementBackgroundImages = function( elem ) {
- var style = getComputedStyle( elem );
- if ( !style ) {
- // Firefox returns null if in a hidden iframe https://bugzil.la/548397
- return;
- }
- // get url inside url("...")
- var reURL = /url\((['"])?(.*?)\1\)/gi;
- var matches = reURL.exec( style.backgroundImage );
- while ( matches !== null ) {
- var url = matches && matches[2];
- if ( url ) {
- this.addBackground( url, elem );
- }
- matches = reURL.exec( style.backgroundImage );
- }
- };
- /**
- * @param {Image} img
- */
- ImagesLoaded.prototype.addImage = function( img ) {
- var loadingImage = new LoadingImage( img );
- this.images.push( loadingImage );
- };
- ImagesLoaded.prototype.addBackground = function( url, elem ) {
- var background = new Background( url, elem );
- this.images.push( background );
- };
- ImagesLoaded.prototype.check = function() {
- var _this = this;
- this.progressedCount = 0;
- this.hasAnyBroken = false;
- // complete if no images
- if ( !this.images.length ) {
- this.complete();
- return;
- }
- function onProgress( image, elem, message ) {
- // HACK - Chrome triggers event before object properties have changed. #83
- setTimeout( function() {
- _this.progress( image, elem, message );
- });
- }
- this.images.forEach( function( loadingImage ) {
- loadingImage.once( 'progress', onProgress );
- loadingImage.check();
- });
- };
- ImagesLoaded.prototype.progress = function( image, elem, message ) {
- this.progressedCount++;
- this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
- // progress event
- this.emitEvent( 'progress', [ this, image, elem ] );
- if ( this.jqDeferred && this.jqDeferred.notify ) {
- this.jqDeferred.notify( this, image );
- }
- // check if completed
- if ( this.progressedCount == this.images.length ) {
- this.complete();
- }
- if ( this.options.debug && console ) {
- console.log( 'progress: ' + message, image, elem );
- }
- };
- ImagesLoaded.prototype.complete = function() {
- var eventName = this.hasAnyBroken ? 'fail' : 'done';
- this.isComplete = true;
- this.emitEvent( eventName, [ this ] );
- this.emitEvent( 'always', [ this ] );
- if ( this.jqDeferred ) {
- var jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
- this.jqDeferred[ jqMethod ]( this );
- }
- };
- // -------------------------- -------------------------- //
- function LoadingImage( img ) {
- this.img = img;
- }
- LoadingImage.prototype = Object.create( EvEmitter.prototype );
- LoadingImage.prototype.check = function() {
- // If complete is true and browser supports natural sizes,
- // try to check for image status manually.
- var isComplete = this.getIsImageComplete();
- if ( isComplete ) {
- // report based on naturalWidth
- this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
- return;
- }
- // If none of the checks above matched, simulate loading on detached element.
- this.proxyImage = new Image();
- this.proxyImage.addEventListener( 'load', this );
- this.proxyImage.addEventListener( 'error', this );
- // bind to image as well for Firefox. #191
- this.img.addEventListener( 'load', this );
- this.img.addEventListener( 'error', this );
- this.proxyImage.src = this.img.src;
- };
- LoadingImage.prototype.getIsImageComplete = function() {
- return this.img.complete && this.img.naturalWidth !== undefined;
- };
- LoadingImage.prototype.confirm = function( isLoaded, message ) {
- this.isLoaded = isLoaded;
- this.emitEvent( 'progress', [ this, this.img, message ] );
- };
- // ----- events ----- //
- // trigger specified handler for event type
- LoadingImage.prototype.handleEvent = function( event ) {
- var method = 'on' + event.type;
- if ( this[ method ] ) {
- this[ method ]( event );
- }
- };
- LoadingImage.prototype.onload = function() {
- this.confirm( true, 'onload' );
- this.unbindEvents();
- };
- LoadingImage.prototype.onerror = function() {
- this.confirm( false, 'onerror' );
- this.unbindEvents();
- };
- LoadingImage.prototype.unbindEvents = function() {
- this.proxyImage.removeEventListener( 'load', this );
- this.proxyImage.removeEventListener( 'error', this );
- this.img.removeEventListener( 'load', this );
- this.img.removeEventListener( 'error', this );
- };
- // -------------------------- Background -------------------------- //
- function Background( url, element ) {
- this.url = url;
- this.element = element;
- this.img = new Image();
- }
- // inherit LoadingImage prototype
- Background.prototype = Object.create( LoadingImage.prototype );
- Background.prototype.check = function() {
- this.img.addEventListener( 'load', this );
- this.img.addEventListener( 'error', this );
- this.img.src = this.url;
- // check if image is already complete
- var isComplete = this.getIsImageComplete();
- if ( isComplete ) {
- this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
- this.unbindEvents();
- }
- };
- Background.prototype.unbindEvents = function() {
- this.img.removeEventListener( 'load', this );
- this.img.removeEventListener( 'error', this );
- };
- Background.prototype.confirm = function( isLoaded, message ) {
- this.isLoaded = isLoaded;
- this.emitEvent( 'progress', [ this, this.element, message ] );
- };
- // -------------------------- jQuery -------------------------- //
- ImagesLoaded.makeJQueryPlugin = function( jQuery ) {
- jQuery = jQuery || window.jQuery;
- if ( !jQuery ) {
- return;
- }
- // set local variable
- $ = jQuery;
- // $().imagesLoaded()
- $.fn.imagesLoaded = function( options, callback ) {
- var instance = new ImagesLoaded( this, options, callback );
- return instance.jqDeferred.promise( $(this) );
- };
- };
- // try making plugin
- ImagesLoaded.makeJQueryPlugin();
- // -------------------------- -------------------------- //
- return ImagesLoaded;
- });
|