Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

imagesloaded

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

imagesloaded - npm Package Compare versions

Comparing version 3.1.8 to 3.2.0

contributing.md
gulpfile.js
sandbox/background/css/background.css
sandbox/background/index.html
sandbox/progress/index.html
sandbox/progress/progress.js
test/css/tests.css
test/unit/append.js
test/unit/background.js
test/unit/basics.js
test/unit/data-uri.js
test/unit/jquery-fail.js
test/unit/jquery-success.js
test/unit/local-files.js
test/unit/no-images.js
test/unit/non-element.js
test/unit/selector-string.js
test/unit/single-element.js

30

bower.json
{
"name": "imagesloaded",
"version": "3.1.7",
"version": "3.2.0",
"description": "JavaScript is all like _You images done yet or what?_",
"main": "imagesloaded.js",
"dependencies": {
"eventEmitter": "4.x",
"eventie": ">=1.0.4 <2"
"eventEmitter": ">=4.2 <5.0",
"eventie": "~1.0.4"
},
"devDependencies": {
"jquery": ">=1.9 <2.0",
"qunit": ">=1.10"
"qunit": "~1.20.0"
},

@@ -17,6 +17,20 @@ "ignore": [

"test",
"component.json",
"imagesloaded.jquery.json",
"package.json"
]
"package.json",
"node_modules",
"bower_components",
"tests"
],
"homepage": "http://imagesloaded.desandro.com",
"authors": [
"David DeSandro"
],
"moduleType": [
"amd",
"globals",
"node"
],
"keywords": [
"images"
],
"license": "MIT"
}

303

imagesloaded.js
/*!
* imagesLoaded v3.1.8
* imagesLoaded v3.2.0
* JavaScript is all like "You images are done yet or what?"

@@ -12,3 +12,3 @@ * MIT License

if ( typeof define === 'function' && define.amd ) {
if ( typeof define == 'function' && define.amd ) {
// AMD

@@ -21,3 +21,3 @@ define( [

});
} else if ( typeof exports === 'object' ) {
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS

@@ -48,3 +48,2 @@ module.exports = factory(

var console = window.console;
var hasConsole = typeof console !== 'undefined';

@@ -63,3 +62,3 @@ // -------------------------- helpers -------------------------- //

function isArray( obj ) {
return objToString.call( obj ) === '[object Array]';
return objToString.call( obj ) == '[object Array]';
}

@@ -73,5 +72,5 @@

ary = obj;
} else if ( typeof obj.length === 'number' ) {
} else if ( typeof obj.length == 'number' ) {
// convert nodeList to array
for ( var i=0, len = obj.length; i < len; i++ ) {
for ( var i=0; i < obj.length; i++ ) {
ary.push( obj[i] );

@@ -96,6 +95,6 @@ }

if ( !( this instanceof ImagesLoaded ) ) {
return new ImagesLoaded( elem, options );
return new ImagesLoaded( elem, options, onAlways );
}
// use elem as selector string
if ( typeof elem === 'string' ) {
if ( typeof elem == 'string' ) {
elem = document.querySelectorAll( elem );

@@ -107,3 +106,3 @@ }

if ( typeof options === 'function' ) {
if ( typeof options == 'function' ) {
onAlways = options;

@@ -140,23 +139,69 @@ } else {

// filter & find items if we have an item selector
for ( var i=0, len = this.elements.length; i < len; i++ ) {
for ( var i=0; i < this.elements.length; i++ ) {
var elem = this.elements[i];
// filter siblings
if ( elem.nodeName === 'IMG' ) {
this.addImage( elem );
this.addElementImages( elem );
}
};
/**
* @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 );
}
// find children
// no non-element nodes, #143
var nodeType = elem.nodeType;
if ( !nodeType || !( nodeType === 1 || nodeType === 9 || nodeType === 11 ) ) {
continue;
}
};
var elementNodeTypes = {
1: true,
9: true,
11: true
};
ImagesLoaded.prototype.addElementBackgroundImages = function( elem ) {
var style = getStyle( elem );
// get url inside url("...")
var reURL = /url\(['"]*([^'"\)]+)['"]*\)/gi;
var matches = reURL.exec( style.backgroundImage );
while ( matches !== null ) {
var url = matches && matches[1];
if ( url ) {
this.addBackground( url, elem );
}
var childElems = elem.querySelectorAll('img');
// concat childElems to filterFound array
for ( var j=0, jLen = childElems.length; j < jLen; j++ ) {
var img = childElems[j];
this.addImage( img );
}
matches = reURL.exec( style.backgroundImage );
}
};
// IE8
var getStyle = window.getComputedStyle || function( elem ) {
return elem.currentStyle;
};
/**

@@ -170,9 +215,13 @@ * @param {Image} img

ImagesLoaded.prototype.addBackground = function( url, elem ) {
var background = new Background( url, elem );
this.images.push( background );
};
ImagesLoaded.prototype.check = function() {
var _this = this;
var checkedCount = 0;
var length = this.images.length;
this.progressedCount = 0;
this.hasAnyBroken = false;
// complete if no images
if ( !length ) {
if ( !this.images.length ) {
this.complete();

@@ -182,18 +231,12 @@ return;

function onConfirm( image, message ) {
if ( _this.options.debug && hasConsole ) {
console.log( 'confirm', image, message );
}
_this.progress( image );
checkedCount++;
if ( checkedCount === length ) {
_this.complete();
}
return true; // bind once
function onProgress( image, elem, message ) {
// HACK - Chrome triggers event before object properties have changed. #83
setTimeout( function() {
_this.progress( image, elem, message );
});
}
for ( var i=0; i < length; i++ ) {
for ( var i=0; i < this.images.length; i++ ) {
var loadingImage = this.images[i];
loadingImage.on( 'confirm', onConfirm );
loadingImage.once( 'progress', onProgress );
loadingImage.check();

@@ -203,12 +246,18 @@ }

ImagesLoaded.prototype.progress = function( image ) {
ImagesLoaded.prototype.progress = function( image, elem, message ) {
this.progressedCount++;
this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
// HACK - Chrome triggers event before object properties have changed. #83
var _this = this;
setTimeout( function() {
_this.emit( 'progress', _this, image );
if ( _this.jqDeferred && _this.jqDeferred.notify ) {
_this.jqDeferred.notify( _this, image );
}
});
// progress event
this.emit( '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 );
}
};

@@ -219,24 +268,10 @@

this.isComplete = true;
var _this = this;
// HACK - another setTimeout so that confirm happens after progress
setTimeout( function() {
_this.emit( eventName, _this );
_this.emit( 'always', _this );
if ( _this.jqDeferred ) {
var jqMethod = _this.hasAnyBroken ? 'reject' : 'resolve';
_this.jqDeferred[ jqMethod ]( _this );
}
});
this.emit( eventName, this );
this.emit( 'always', this );
if ( this.jqDeferred ) {
var jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
this.jqDeferred[ jqMethod ]( this );
}
};
// -------------------------- jquery -------------------------- //
if ( $ ) {
$.fn.imagesLoaded = function( options, callback ) {
var instance = new ImagesLoaded( this, options, callback );
return instance.jqDeferred.promise( $(this) );
};
}
// -------------------------- -------------------------- //

@@ -251,12 +286,6 @@

LoadingImage.prototype.check = function() {
// first check cached any previous images that have same src
var resource = cache[ this.img.src ] || new Resource( this.img.src );
if ( resource.isConfirmed ) {
this.confirm( resource.isLoaded, 'cached was confirmed' );
return;
}
// If complete is true and browser supports natural sizes,
// try to check for image status manually.
if ( this.img.complete && this.img.naturalWidth !== undefined ) {
var isComplete = this.getIsImageComplete();
if ( isComplete ) {
// report based on naturalWidth

@@ -268,9 +297,13 @@ this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );

// If none of the checks above matched, simulate loading on detached element.
var _this = this;
resource.on( 'confirm', function( resrc, message ) {
_this.confirm( resrc.isLoaded, message );
return true;
});
this.proxyImage = new Image();
eventie.bind( this.proxyImage, 'load', this );
eventie.bind( this.proxyImage, 'error', this );
// bind to image as well for Firefox. #191
eventie.bind( this.img, 'load', this );
eventie.bind( this.img, 'error', this );
this.proxyImage.src = this.img.src;
};
resource.check();
LoadingImage.prototype.getIsImageComplete = function() {
return this.img.complete && this.img.naturalWidth !== undefined;
};

@@ -280,38 +313,9 @@

this.isLoaded = isLoaded;
this.emit( 'confirm', this, message );
this.emit( 'progress', this, this.img, message );
};
// -------------------------- Resource -------------------------- //
// Resource checks each src, only once
// separate class from LoadingImage to prevent memory leaks. See #115
var cache = {};
function Resource( src ) {
this.src = src;
// add to cache
cache[ src ] = this;
}
Resource.prototype = new EventEmitter();
Resource.prototype.check = function() {
// only trigger checking once
if ( this.isChecked ) {
return;
}
// simulate loading on detached element
var proxyImage = new Image();
eventie.bind( proxyImage, 'load', this );
eventie.bind( proxyImage, 'error', this );
proxyImage.src = this.src;
// set flag
this.isChecked = true;
};
// ----- events ----- //
// trigger specified handler for event type
Resource.prototype.handleEvent = function( event ) {
LoadingImage.prototype.handleEvent = function( event ) {
var method = 'on' + event.type;

@@ -323,26 +327,71 @@ if ( this[ method ] ) {

Resource.prototype.onload = function( event ) {
LoadingImage.prototype.onload = function() {
this.confirm( true, 'onload' );
this.unbindProxyEvents( event );
this.unbindEvents();
};
Resource.prototype.onerror = function( event ) {
LoadingImage.prototype.onerror = function() {
this.confirm( false, 'onerror' );
this.unbindProxyEvents( event );
this.unbindEvents();
};
// ----- confirm ----- //
LoadingImage.prototype.unbindEvents = function() {
eventie.unbind( this.proxyImage, 'load', this );
eventie.unbind( this.proxyImage, 'error', this );
eventie.unbind( this.img, 'load', this );
eventie.unbind( this.img, 'error', this );
};
Resource.prototype.confirm = function( isLoaded, message ) {
this.isConfirmed = true;
// -------------------------- Background -------------------------- //
function Background( url, element ) {
this.url = url;
this.element = element;
this.img = new Image();
}
// inherit LoadingImage prototype
Background.prototype = new LoadingImage();
Background.prototype.check = function() {
eventie.bind( this.img, 'load', this );
eventie.bind( this.img, '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() {
eventie.unbind( this.img, 'load', this );
eventie.unbind( this.img, 'error', this );
};
Background.prototype.confirm = function( isLoaded, message ) {
this.isLoaded = isLoaded;
this.emit( 'confirm', this, message );
this.emit( 'progress', this, this.element, message );
};
Resource.prototype.unbindProxyEvents = function( event ) {
eventie.unbind( event.target, 'load', this );
eventie.unbind( event.target, 'error', this );
// -------------------------- 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();
// ----- ----- //
// -------------------------- -------------------------- //

@@ -349,0 +398,0 @@ return ImagesLoaded;

311

imagesloaded.pkgd.js
/*!
* imagesLoaded PACKAGED v3.1.8
* imagesLoaded PACKAGED v3.2.0
* JavaScript is all like "You images are done yet or what?"

@@ -7,3 +7,2 @@ * MIT License

/*!

@@ -17,3 +16,3 @@ * EventEmitter v4.2.6 - git.io/ee

(function () {
'use strict';

@@ -562,3 +561,3 @@ /**

/*!
* imagesLoaded v3.1.8
* imagesLoaded v3.2.0
* JavaScript is all like "You images are done yet or what?"

@@ -568,3 +567,3 @@ * MIT License

( function( window, factory ) {
( function( window, factory ) { 'use strict';
// universal module definition

@@ -574,3 +573,3 @@

if ( typeof define === 'function' && define.amd ) {
if ( typeof define == 'function' && define.amd ) {
// AMD

@@ -583,3 +582,3 @@ define( [

});
} else if ( typeof exports === 'object' ) {
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS

@@ -610,3 +609,2 @@ module.exports = factory(

var console = window.console;
var hasConsole = typeof console !== 'undefined';

@@ -625,3 +623,3 @@ // -------------------------- helpers -------------------------- //

function isArray( obj ) {
return objToString.call( obj ) === '[object Array]';
return objToString.call( obj ) == '[object Array]';
}

@@ -635,5 +633,5 @@

ary = obj;
} else if ( typeof obj.length === 'number' ) {
} else if ( typeof obj.length == 'number' ) {
// convert nodeList to array
for ( var i=0, len = obj.length; i < len; i++ ) {
for ( var i=0; i < obj.length; i++ ) {
ary.push( obj[i] );

@@ -658,6 +656,6 @@ }

if ( !( this instanceof ImagesLoaded ) ) {
return new ImagesLoaded( elem, options );
return new ImagesLoaded( elem, options, onAlways );
}
// use elem as selector string
if ( typeof elem === 'string' ) {
if ( typeof elem == 'string' ) {
elem = document.querySelectorAll( elem );

@@ -669,3 +667,3 @@ }

if ( typeof options === 'function' ) {
if ( typeof options == 'function' ) {
onAlways = options;

@@ -702,23 +700,69 @@ } else {

// filter & find items if we have an item selector
for ( var i=0, len = this.elements.length; i < len; i++ ) {
for ( var i=0; i < this.elements.length; i++ ) {
var elem = this.elements[i];
// filter siblings
if ( elem.nodeName === 'IMG' ) {
this.addImage( elem );
this.addElementImages( elem );
}
};
/**
* @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 );
}
// find children
// no non-element nodes, #143
var nodeType = elem.nodeType;
if ( !nodeType || !( nodeType === 1 || nodeType === 9 || nodeType === 11 ) ) {
continue;
}
};
var elementNodeTypes = {
1: true,
9: true,
11: true
};
ImagesLoaded.prototype.addElementBackgroundImages = function( elem ) {
var style = getStyle( elem );
// get url inside url("...")
var reURL = /url\(['"]*([^'"\)]+)['"]*\)/gi;
var matches = reURL.exec( style.backgroundImage );
while ( matches !== null ) {
var url = matches && matches[1];
if ( url ) {
this.addBackground( url, elem );
}
var childElems = elem.querySelectorAll('img');
// concat childElems to filterFound array
for ( var j=0, jLen = childElems.length; j < jLen; j++ ) {
var img = childElems[j];
this.addImage( img );
}
matches = reURL.exec( style.backgroundImage );
}
};
// IE8
var getStyle = window.getComputedStyle || function( elem ) {
return elem.currentStyle;
};
/**

@@ -732,9 +776,13 @@ * @param {Image} img

ImagesLoaded.prototype.addBackground = function( url, elem ) {
var background = new Background( url, elem );
this.images.push( background );
};
ImagesLoaded.prototype.check = function() {
var _this = this;
var checkedCount = 0;
var length = this.images.length;
this.progressedCount = 0;
this.hasAnyBroken = false;
// complete if no images
if ( !length ) {
if ( !this.images.length ) {
this.complete();

@@ -744,18 +792,12 @@ return;

function onConfirm( image, message ) {
if ( _this.options.debug && hasConsole ) {
console.log( 'confirm', image, message );
}
_this.progress( image );
checkedCount++;
if ( checkedCount === length ) {
_this.complete();
}
return true; // bind once
function onProgress( image, elem, message ) {
// HACK - Chrome triggers event before object properties have changed. #83
setTimeout( function() {
_this.progress( image, elem, message );
});
}
for ( var i=0; i < length; i++ ) {
for ( var i=0; i < this.images.length; i++ ) {
var loadingImage = this.images[i];
loadingImage.on( 'confirm', onConfirm );
loadingImage.once( 'progress', onProgress );
loadingImage.check();

@@ -765,12 +807,18 @@ }

ImagesLoaded.prototype.progress = function( image ) {
ImagesLoaded.prototype.progress = function( image, elem, message ) {
this.progressedCount++;
this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
// HACK - Chrome triggers event before object properties have changed. #83
var _this = this;
setTimeout( function() {
_this.emit( 'progress', _this, image );
if ( _this.jqDeferred && _this.jqDeferred.notify ) {
_this.jqDeferred.notify( _this, image );
}
});
// progress event
this.emit( '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 );
}
};

@@ -781,24 +829,10 @@

this.isComplete = true;
var _this = this;
// HACK - another setTimeout so that confirm happens after progress
setTimeout( function() {
_this.emit( eventName, _this );
_this.emit( 'always', _this );
if ( _this.jqDeferred ) {
var jqMethod = _this.hasAnyBroken ? 'reject' : 'resolve';
_this.jqDeferred[ jqMethod ]( _this );
}
});
this.emit( eventName, this );
this.emit( 'always', this );
if ( this.jqDeferred ) {
var jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
this.jqDeferred[ jqMethod ]( this );
}
};
// -------------------------- jquery -------------------------- //
if ( $ ) {
$.fn.imagesLoaded = function( options, callback ) {
var instance = new ImagesLoaded( this, options, callback );
return instance.jqDeferred.promise( $(this) );
};
}
// -------------------------- -------------------------- //

@@ -813,12 +847,6 @@

LoadingImage.prototype.check = function() {
// first check cached any previous images that have same src
var resource = cache[ this.img.src ] || new Resource( this.img.src );
if ( resource.isConfirmed ) {
this.confirm( resource.isLoaded, 'cached was confirmed' );
return;
}
// If complete is true and browser supports natural sizes,
// try to check for image status manually.
if ( this.img.complete && this.img.naturalWidth !== undefined ) {
var isComplete = this.getIsImageComplete();
if ( isComplete ) {
// report based on naturalWidth

@@ -830,9 +858,13 @@ this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );

// If none of the checks above matched, simulate loading on detached element.
var _this = this;
resource.on( 'confirm', function( resrc, message ) {
_this.confirm( resrc.isLoaded, message );
return true;
});
this.proxyImage = new Image();
eventie.bind( this.proxyImage, 'load', this );
eventie.bind( this.proxyImage, 'error', this );
// bind to image as well for Firefox. #191
eventie.bind( this.img, 'load', this );
eventie.bind( this.img, 'error', this );
this.proxyImage.src = this.img.src;
};
resource.check();
LoadingImage.prototype.getIsImageComplete = function() {
return this.img.complete && this.img.naturalWidth !== undefined;
};

@@ -842,38 +874,9 @@

this.isLoaded = isLoaded;
this.emit( 'confirm', this, message );
this.emit( 'progress', this, this.img, message );
};
// -------------------------- Resource -------------------------- //
// Resource checks each src, only once
// separate class from LoadingImage to prevent memory leaks. See #115
var cache = {};
function Resource( src ) {
this.src = src;
// add to cache
cache[ src ] = this;
}
Resource.prototype = new EventEmitter();
Resource.prototype.check = function() {
// only trigger checking once
if ( this.isChecked ) {
return;
}
// simulate loading on detached element
var proxyImage = new Image();
eventie.bind( proxyImage, 'load', this );
eventie.bind( proxyImage, 'error', this );
proxyImage.src = this.src;
// set flag
this.isChecked = true;
};
// ----- events ----- //
// trigger specified handler for event type
Resource.prototype.handleEvent = function( event ) {
LoadingImage.prototype.handleEvent = function( event ) {
var method = 'on' + event.type;

@@ -885,26 +888,71 @@ if ( this[ method ] ) {

Resource.prototype.onload = function( event ) {
LoadingImage.prototype.onload = function() {
this.confirm( true, 'onload' );
this.unbindProxyEvents( event );
this.unbindEvents();
};
Resource.prototype.onerror = function( event ) {
LoadingImage.prototype.onerror = function() {
this.confirm( false, 'onerror' );
this.unbindProxyEvents( event );
this.unbindEvents();
};
// ----- confirm ----- //
LoadingImage.prototype.unbindEvents = function() {
eventie.unbind( this.proxyImage, 'load', this );
eventie.unbind( this.proxyImage, 'error', this );
eventie.unbind( this.img, 'load', this );
eventie.unbind( this.img, 'error', this );
};
Resource.prototype.confirm = function( isLoaded, message ) {
this.isConfirmed = true;
// -------------------------- Background -------------------------- //
function Background( url, element ) {
this.url = url;
this.element = element;
this.img = new Image();
}
// inherit LoadingImage prototype
Background.prototype = new LoadingImage();
Background.prototype.check = function() {
eventie.bind( this.img, 'load', this );
eventie.bind( this.img, '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() {
eventie.unbind( this.img, 'load', this );
eventie.unbind( this.img, 'error', this );
};
Background.prototype.confirm = function( isLoaded, message ) {
this.isLoaded = isLoaded;
this.emit( 'confirm', this, message );
this.emit( 'progress', this, this.element, message );
};
Resource.prototype.unbindProxyEvents = function( event ) {
eventie.unbind( event.target, 'load', this );
eventie.unbind( event.target, 'error', this );
// -------------------------- 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();
// ----- ----- //
// -------------------------- -------------------------- //

@@ -914,1 +962,2 @@ return ImagesLoaded;

});

4

imagesloaded.pkgd.min.js
/*!
* imagesLoaded PACKAGED v3.1.8
* imagesLoaded PACKAGED v3.2.0
* JavaScript is all like "You images are done yet or what?"

@@ -7,2 +7,2 @@ * MIT License

(function(){function e(){}function t(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var i=e.prototype,r=this,o=r.EventEmitter;i.getListeners=function(e){var t,n,i=this._getEvents();if("object"==typeof e){t={};for(n in i)i.hasOwnProperty(n)&&e.test(n)&&(t[n]=i[n])}else t=i[e]||(i[e]=[]);return t},i.flattenListeners=function(e){var t,n=[];for(t=0;e.length>t;t+=1)n.push(e[t].listener);return n},i.getListenersAsObject=function(e){var t,n=this.getListeners(e);return n instanceof Array&&(t={},t[e]=n),t||n},i.addListener=function(e,n){var i,r=this.getListenersAsObject(e),o="object"==typeof n;for(i in r)r.hasOwnProperty(i)&&-1===t(r[i],n)&&r[i].push(o?n:{listener:n,once:!1});return this},i.on=n("addListener"),i.addOnceListener=function(e,t){return this.addListener(e,{listener:t,once:!0})},i.once=n("addOnceListener"),i.defineEvent=function(e){return this.getListeners(e),this},i.defineEvents=function(e){for(var t=0;e.length>t;t+=1)this.defineEvent(e[t]);return this},i.removeListener=function(e,n){var i,r,o=this.getListenersAsObject(e);for(r in o)o.hasOwnProperty(r)&&(i=t(o[r],n),-1!==i&&o[r].splice(i,1));return this},i.off=n("removeListener"),i.addListeners=function(e,t){return this.manipulateListeners(!1,e,t)},i.removeListeners=function(e,t){return this.manipulateListeners(!0,e,t)},i.manipulateListeners=function(e,t,n){var i,r,o=e?this.removeListener:this.addListener,s=e?this.removeListeners:this.addListeners;if("object"!=typeof t||t instanceof RegExp)for(i=n.length;i--;)o.call(this,t,n[i]);else for(i in t)t.hasOwnProperty(i)&&(r=t[i])&&("function"==typeof r?o.call(this,i,r):s.call(this,i,r));return this},i.removeEvent=function(e){var t,n=typeof e,i=this._getEvents();if("string"===n)delete i[e];else if("object"===n)for(t in i)i.hasOwnProperty(t)&&e.test(t)&&delete i[t];else delete this._events;return this},i.removeAllListeners=n("removeEvent"),i.emitEvent=function(e,t){var n,i,r,o,s=this.getListenersAsObject(e);for(r in s)if(s.hasOwnProperty(r))for(i=s[r].length;i--;)n=s[r][i],n.once===!0&&this.removeListener(e,n.listener),o=n.listener.apply(this,t||[]),o===this._getOnceReturnValue()&&this.removeListener(e,n.listener);return this},i.trigger=n("emitEvent"),i.emit=function(e){var t=Array.prototype.slice.call(arguments,1);return this.emitEvent(e,t)},i.setOnceReturnValue=function(e){return this._onceReturnValue=e,this},i._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},i._getEvents=function(){return this._events||(this._events={})},e.noConflict=function(){return r.EventEmitter=o,e},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return e}):"object"==typeof module&&module.exports?module.exports=e:this.EventEmitter=e}).call(this),function(e){function t(t){var n=e.event;return n.target=n.target||n.srcElement||t,n}var n=document.documentElement,i=function(){};n.addEventListener?i=function(e,t,n){e.addEventListener(t,n,!1)}:n.attachEvent&&(i=function(e,n,i){e[n+i]=i.handleEvent?function(){var n=t(e);i.handleEvent.call(i,n)}:function(){var n=t(e);i.call(e,n)},e.attachEvent("on"+n,e[n+i])});var r=function(){};n.removeEventListener?r=function(e,t,n){e.removeEventListener(t,n,!1)}:n.detachEvent&&(r=function(e,t,n){e.detachEvent("on"+t,e[t+n]);try{delete e[t+n]}catch(i){e[t+n]=void 0}});var o={bind:i,unbind:r};"function"==typeof define&&define.amd?define("eventie/eventie",o):e.eventie=o}(this),function(e,t){"function"==typeof define&&define.amd?define(["eventEmitter/EventEmitter","eventie/eventie"],function(n,i){return t(e,n,i)}):"object"==typeof exports?module.exports=t(e,require("wolfy87-eventemitter"),require("eventie")):e.imagesLoaded=t(e,e.EventEmitter,e.eventie)}(window,function(e,t,n){function i(e,t){for(var n in t)e[n]=t[n];return e}function r(e){return"[object Array]"===d.call(e)}function o(e){var t=[];if(r(e))t=e;else if("number"==typeof e.length)for(var n=0,i=e.length;i>n;n++)t.push(e[n]);else t.push(e);return t}function s(e,t,n){if(!(this instanceof s))return new s(e,t);"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=o(e),this.options=i({},this.options),"function"==typeof t?n=t:i(this.options,t),n&&this.on("always",n),this.getImages(),a&&(this.jqDeferred=new a.Deferred);var r=this;setTimeout(function(){r.check()})}function f(e){this.img=e}function c(e){this.src=e,v[e]=this}var a=e.jQuery,u=e.console,h=u!==void 0,d=Object.prototype.toString;s.prototype=new t,s.prototype.options={},s.prototype.getImages=function(){this.images=[];for(var e=0,t=this.elements.length;t>e;e++){var n=this.elements[e];"IMG"===n.nodeName&&this.addImage(n);var i=n.nodeType;if(i&&(1===i||9===i||11===i))for(var r=n.querySelectorAll("img"),o=0,s=r.length;s>o;o++){var f=r[o];this.addImage(f)}}},s.prototype.addImage=function(e){var t=new f(e);this.images.push(t)},s.prototype.check=function(){function e(e,r){return t.options.debug&&h&&u.log("confirm",e,r),t.progress(e),n++,n===i&&t.complete(),!0}var t=this,n=0,i=this.images.length;if(this.hasAnyBroken=!1,!i)return this.complete(),void 0;for(var r=0;i>r;r++){var o=this.images[r];o.on("confirm",e),o.check()}},s.prototype.progress=function(e){this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded;var t=this;setTimeout(function(){t.emit("progress",t,e),t.jqDeferred&&t.jqDeferred.notify&&t.jqDeferred.notify(t,e)})},s.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";this.isComplete=!0;var t=this;setTimeout(function(){if(t.emit(e,t),t.emit("always",t),t.jqDeferred){var n=t.hasAnyBroken?"reject":"resolve";t.jqDeferred[n](t)}})},a&&(a.fn.imagesLoaded=function(e,t){var n=new s(this,e,t);return n.jqDeferred.promise(a(this))}),f.prototype=new t,f.prototype.check=function(){var e=v[this.img.src]||new c(this.img.src);if(e.isConfirmed)return this.confirm(e.isLoaded,"cached was confirmed"),void 0;if(this.img.complete&&void 0!==this.img.naturalWidth)return this.confirm(0!==this.img.naturalWidth,"naturalWidth"),void 0;var t=this;e.on("confirm",function(e,n){return t.confirm(e.isLoaded,n),!0}),e.check()},f.prototype.confirm=function(e,t){this.isLoaded=e,this.emit("confirm",this,t)};var v={};return c.prototype=new t,c.prototype.check=function(){if(!this.isChecked){var e=new Image;n.bind(e,"load",this),n.bind(e,"error",this),e.src=this.src,this.isChecked=!0}},c.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},c.prototype.onload=function(e){this.confirm(!0,"onload"),this.unbindProxyEvents(e)},c.prototype.onerror=function(e){this.confirm(!1,"onerror"),this.unbindProxyEvents(e)},c.prototype.confirm=function(e,t){this.isConfirmed=!0,this.isLoaded=e,this.emit("confirm",this,t)},c.prototype.unbindProxyEvents=function(e){n.unbind(e.target,"load",this),n.unbind(e.target,"error",this)},s});
(function(){"use strict";function e(){}function t(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var i=e.prototype,r=this,s=r.EventEmitter;i.getListeners=function(e){var t,n,i=this._getEvents();if("object"==typeof e){t={};for(n in i)i.hasOwnProperty(n)&&e.test(n)&&(t[n]=i[n])}else t=i[e]||(i[e]=[]);return t},i.flattenListeners=function(e){var t,n=[];for(t=0;t<e.length;t+=1)n.push(e[t].listener);return n},i.getListenersAsObject=function(e){var t,n=this.getListeners(e);return n instanceof Array&&(t={},t[e]=n),t||n},i.addListener=function(e,n){var i,r=this.getListenersAsObject(e),s="object"==typeof n;for(i in r)r.hasOwnProperty(i)&&-1===t(r[i],n)&&r[i].push(s?n:{listener:n,once:!1});return this},i.on=n("addListener"),i.addOnceListener=function(e,t){return this.addListener(e,{listener:t,once:!0})},i.once=n("addOnceListener"),i.defineEvent=function(e){return this.getListeners(e),this},i.defineEvents=function(e){for(var t=0;t<e.length;t+=1)this.defineEvent(e[t]);return this},i.removeListener=function(e,n){var i,r,s=this.getListenersAsObject(e);for(r in s)s.hasOwnProperty(r)&&(i=t(s[r],n),-1!==i&&s[r].splice(i,1));return this},i.off=n("removeListener"),i.addListeners=function(e,t){return this.manipulateListeners(!1,e,t)},i.removeListeners=function(e,t){return this.manipulateListeners(!0,e,t)},i.manipulateListeners=function(e,t,n){var i,r,s=e?this.removeListener:this.addListener,o=e?this.removeListeners:this.addListeners;if("object"!=typeof t||t instanceof RegExp)for(i=n.length;i--;)s.call(this,t,n[i]);else for(i in t)t.hasOwnProperty(i)&&(r=t[i])&&("function"==typeof r?s.call(this,i,r):o.call(this,i,r));return this},i.removeEvent=function(e){var t,n=typeof e,i=this._getEvents();if("string"===n)delete i[e];else if("object"===n)for(t in i)i.hasOwnProperty(t)&&e.test(t)&&delete i[t];else delete this._events;return this},i.removeAllListeners=n("removeEvent"),i.emitEvent=function(e,t){var n,i,r,s,o=this.getListenersAsObject(e);for(r in o)if(o.hasOwnProperty(r))for(i=o[r].length;i--;)n=o[r][i],n.once===!0&&this.removeListener(e,n.listener),s=n.listener.apply(this,t||[]),s===this._getOnceReturnValue()&&this.removeListener(e,n.listener);return this},i.trigger=n("emitEvent"),i.emit=function(e){var t=Array.prototype.slice.call(arguments,1);return this.emitEvent(e,t)},i.setOnceReturnValue=function(e){return this._onceReturnValue=e,this},i._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},i._getEvents=function(){return this._events||(this._events={})},e.noConflict=function(){return r.EventEmitter=s,e},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return e}):"object"==typeof module&&module.exports?module.exports=e:this.EventEmitter=e}).call(this),function(e){function t(t){var n=e.event;return n.target=n.target||n.srcElement||t,n}var n=document.documentElement,i=function(){};n.addEventListener?i=function(e,t,n){e.addEventListener(t,n,!1)}:n.attachEvent&&(i=function(e,n,i){e[n+i]=i.handleEvent?function(){var n=t(e);i.handleEvent.call(i,n)}:function(){var n=t(e);i.call(e,n)},e.attachEvent("on"+n,e[n+i])});var r=function(){};n.removeEventListener?r=function(e,t,n){e.removeEventListener(t,n,!1)}:n.detachEvent&&(r=function(e,t,n){e.detachEvent("on"+t,e[t+n]);try{delete e[t+n]}catch(i){e[t+n]=void 0}});var s={bind:i,unbind:r};"function"==typeof define&&define.amd?define("eventie/eventie",s):e.eventie=s}(this),function(e,t){"use strict";"function"==typeof define&&define.amd?define(["eventEmitter/EventEmitter","eventie/eventie"],function(n,i){return t(e,n,i)}):"object"==typeof module&&module.exports?module.exports=t(e,require("wolfy87-eventemitter"),require("eventie")):e.imagesLoaded=t(e,e.EventEmitter,e.eventie)}(window,function(e,t,n){function i(e,t){for(var n in t)e[n]=t[n];return e}function r(e){return"[object Array]"==f.call(e)}function s(e){var t=[];if(r(e))t=e;else if("number"==typeof e.length)for(var n=0;n<e.length;n++)t.push(e[n]);else t.push(e);return t}function o(e,t,n){if(!(this instanceof o))return new o(e,t,n);"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=s(e),this.options=i({},this.options),"function"==typeof t?n=t:i(this.options,t),n&&this.on("always",n),this.getImages(),u&&(this.jqDeferred=new u.Deferred);var r=this;setTimeout(function(){r.check()})}function h(e){this.img=e}function a(e,t){this.url=e,this.element=t,this.img=new Image}var u=e.jQuery,c=e.console,f=Object.prototype.toString;o.prototype=new t,o.prototype.options={},o.prototype.getImages=function(){this.images=[];for(var e=0;e<this.elements.length;e++){var t=this.elements[e];this.addElementImages(t)}},o.prototype.addElementImages=function(e){"IMG"==e.nodeName&&this.addImage(e),this.options.background===!0&&this.addElementBackgroundImages(e);var t=e.nodeType;if(t&&d[t]){for(var n=e.querySelectorAll("img"),i=0;i<n.length;i++){var r=n[i];this.addImage(r)}if("string"==typeof this.options.background){var s=e.querySelectorAll(this.options.background);for(i=0;i<s.length;i++){var o=s[i];this.addElementBackgroundImages(o)}}}};var d={1:!0,9:!0,11:!0};o.prototype.addElementBackgroundImages=function(e){for(var t=m(e),n=/url\(['"]*([^'"\)]+)['"]*\)/gi,i=n.exec(t.backgroundImage);null!==i;){var r=i&&i[1];r&&this.addBackground(r,e),i=n.exec(t.backgroundImage)}};var m=e.getComputedStyle||function(e){return e.currentStyle};return o.prototype.addImage=function(e){var t=new h(e);this.images.push(t)},o.prototype.addBackground=function(e,t){var n=new a(e,t);this.images.push(n)},o.prototype.check=function(){function e(e,n,i){setTimeout(function(){t.progress(e,n,i)})}var t=this;if(this.progressedCount=0,this.hasAnyBroken=!1,!this.images.length)return void this.complete();for(var n=0;n<this.images.length;n++){var i=this.images[n];i.once("progress",e),i.check()}},o.prototype.progress=function(e,t,n){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded,this.emit("progress",this,e,t),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,e),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&c&&c.log("progress: "+n,e,t)},o.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emit(e,this),this.emit("always",this),this.jqDeferred){var t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},h.prototype=new t,h.prototype.check=function(){var e=this.getIsImageComplete();return e?void this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,n.bind(this.proxyImage,"load",this),n.bind(this.proxyImage,"error",this),n.bind(this.img,"load",this),n.bind(this.img,"error",this),void(this.proxyImage.src=this.img.src))},h.prototype.getIsImageComplete=function(){return this.img.complete&&void 0!==this.img.naturalWidth},h.prototype.confirm=function(e,t){this.isLoaded=e,this.emit("progress",this,this.img,t)},h.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},h.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},h.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},h.prototype.unbindEvents=function(){n.unbind(this.proxyImage,"load",this),n.unbind(this.proxyImage,"error",this),n.unbind(this.img,"load",this),n.unbind(this.img,"error",this)},a.prototype=new h,a.prototype.check=function(){n.bind(this.img,"load",this),n.bind(this.img,"error",this),this.img.src=this.url;var e=this.getIsImageComplete();e&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},a.prototype.unbindEvents=function(){n.unbind(this.img,"load",this),n.unbind(this.img,"error",this)},a.prototype.confirm=function(e,t){this.isLoaded=e,this.emit("progress",this,this.element,t)},o.makeJQueryPlugin=function(t){t=t||e.jQuery,t&&(u=t,u.fn.imagesLoaded=function(e,t){var n=new o(this,e,t);return n.jqDeferred.promise(u(this))})},o.makeJQueryPlugin(),o});

48

package.json
{
"name": "imagesloaded",
"version": "3.1.8",
"version": "3.2.0",
"description": "You images done yet or what?",
"main": "imagesloaded.js",
"dependencies": {
"wolfy87-eventemitter": ">=4.2 <5.0",
"eventie": "~1.0.4"
},
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-uglify": "~0.1.2",
"grunt-contrib-watch": "~0.3.1",
"highlight.js": "~7.3.0",
"marked": "~0.2.8",
"grunt-requirejs": "~0.4.0"
"chalk": "^1.1.1",
"cheerio": "^0.19.0",
"gulp": "^3.9.0",
"gulp-jshint": "^1.11.2",
"gulp-json-lint": "^0.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-uglify": "^1.4.2",
"gulp-util": "^3.0.7",
"highlight.js": "^8.9.1",
"marked": "^0.3.5",
"minimist": "^1.2.0",
"requirejs": "^2.1.20",
"through2": "^2.0.0"
},
"dependencies": {
"wolfy87-eventemitter": "4.x",
"eventie": ">=1.0.4 <2"
},
"repository": {

@@ -26,5 +33,18 @@ "type": "git",

"loaded",
"ui"
"ui",
"dom",
"jquery-plugin"
],
"license": "MIT"
"license": "MIT",
"bugs": {
"url": "https://github.com/desandro/imagesloaded/issues"
},
"homepage": "https://github.com/desandro/imagesloaded",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "David DeSandro"
}

235

README.md

@@ -13,23 +13,67 @@ # imagesLoaded

Get a packaged source file:
### Download
+ [imagesloaded.pkgd.min.js](http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js)
+ [imagesloaded.pkgd.js](http://imagesloaded.desandro.com/imagesloaded.pkgd.js)
+ [imagesloaded.pkgd.min.js](http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js) minified
+ [imagesloaded.pkgd.js](http://imagesloaded.desandro.com/imagesloaded.pkgd.js) un-minified
Or install via [Bower](http://bower.io):
### CDN
``` bash
bower install imagesloaded
``` html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.js"></script>
```
Or install via [Component](https://github.com/component/component):
### Package managers
Install via npm: `npm install imagesloaded`
Install via [Bower](http://bower.io): `bower install imagesloaded --save`
## jQuery
You can use imagesLoaded as a jQuery Plugin.
``` js
component install desandro/imagesloaded
$('#container').imagesLoaded( function() {
// images have loaded
});
// options
$('#container').imagesLoaded( {
// options...
},
function() {
// images have loaded
}
);
```
## Usage
`.imagesLoaded()` returns a [jQuery Deferred object](http://api.jquery.com/category/deferred-object/). This allows you to use `.always()`, `.done()`, `.fail()` and `.progress()`.
``` js
$('#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 );
});
```
## Vanilla JavaScript
You can use imagesLoaded with vanilla JS.
``` js
imagesLoaded( elem, callback )
// options
imagesLoaded( elem, options, callback )
// you can use `new` if you like

@@ -40,2 +84,3 @@ new imagesLoaded( elem, callback )

+ `elem` _Element, NodeList, Array, or Selector String_
+ `options` _Object_
+ `callback` _Function_ - function triggered after all images have been loaded

@@ -57,7 +102,4 @@

Bind events with vanilla JS with .on(), .off(), and .once() methods.
## Events
imagesLoaded is an Event Emitter. You can bind event listeners to events.
``` js

@@ -74,5 +116,45 @@ var imgLoad = imagesLoaded( elem );

## Background
Detect when background images have loaded, in addition to `<img>`s.
Set `{ background: true }` to detect when the element's background image has loaded.
``` js
// jQuery
$('#container').imagesLoaded( { background: true }, function() {
console.log('#container background image loaded');
});
// vanilla JS
imagesLoaded( '#container', { background: true }, function() {
console.log('#container background image loaded');
});
```
Set to a selector string like `{ background: '.item' }` to detect when the background images of child elements have loaded.
``` js
// jQuery
$('#container').imagesLoaded( { background: '.item' }, function() {
console.log('all .item background images loaded');
});
// vanilla JS
imagesLoaded( '#container', { background: '.item' }, function() {
console.log('all .item background images loaded');
});
```
## Events
### always
``` js
// jQuery
$('#container').imagesLoaded().always( function( instance ) {
console.log('ALWAYS - all images have been loaded');
});
// vanilla JS
imgLoad.on( 'always', function( instance ) {

@@ -90,2 +172,8 @@ console.log('ALWAYS - all images have been loaded');

``` js
// jQuery
$('#container').imagesLoaded().done( function( instance ) {
console.log('DONE - all images have been successfully loaded');
});
// vanilla JS
imgLoad.on( 'done', function( instance ) {

@@ -101,2 +189,7 @@ console.log('DONE - all images have been successfully loaded');

``` js
$('#container').imagesLoaded().fail( function( instance ) {
console.log('FAIL - all images loaded, at least one is broken');
});
// vanilla JS
imgLoad.on( 'fail', function( instance ) {

@@ -123,2 +216,4 @@ console.log('FAIL - all images loaded, at least one is broken');

<!-- sponsored -->
## Properties

@@ -151,8 +246,61 @@

## jQuery
## Browserify
If you include jQuery, imagesLoaded can be used as a jQuery Plugin.
imagesLoaded works with [Browserify](http://browserify.org/).
``` bash
npm install imagesloaded --save
```
``` js
$('#container').imagesLoaded( function() {
var imagesLoaded = require('imagesloaded');
imagesLoaded( elem, function() {...} );
```
Use `.makeJQueryPlugin` to make to use `.imagesLoaded()` jQuery plugin.
``` js
var $ = require('jquery');
var imagesLoaded = require('imagesloaded');
// provide jQuery argument
imagesLoaded.makeJQueryPlugin( $ );
// now use .imagesLoaded() jQuery plugin
$('#container').imagesLoaded( function() {...});
```
## Webpack
Install imagesLoaded and [imports-loader](https://github.com/webpack/imports-loader) with npm.
``` bash
npm install imagesLoaded
npm install imports-loader
```
In your config file, `webpack.config.js`, use the imports loader to disable `define` and set window for `imagesloaded`.
``` js
module.exports = {
module: {
loaders: [
{
test: /imagesloaded/,
loader: 'imports?define=>false&this=>window'
}
]
}
};
```
(This is hack is required because of an issue with how Webpack loads dependencies. [+1 this issue on GitHub](https://github.com/webpack/webpack/issues/883) to help get this issue addressed.)
You can then `require('imagesloaded')`.
``` js
// main.js
var imagesLoaded = require('imagesLoaded');
imagesLoaded( '#container', function() {
// images have loaded

@@ -162,23 +310,21 @@ });

### jQuery Deferred
Use `.makeJQueryPlugin` to make `.imagesLoaded()` jQuery plugin.
The jQuery plugin returns a [jQuery Deferred object](http://api.jquery.com/category/deferred-object/). This allows you to use `.always()`, `.done()`, `.fail()` and `.progress()`, similarly to the emitted events.
``` js
// main.js
var imagesLoaded = require('imagesLoaded');
var jQuery = require('jquery');
``` js
$('#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 );
});
// provide jQuery argument
imagesLoaded.makeJQueryPlugin( $ );
// now use .imagesLoaded() jQuery plugin
$('#container').imagesLoaded( function() {...});
```
Run webpack.
``` bash
webpack main.js bundle.js
```
## RequireJS

@@ -198,5 +344,19 @@

Or, you can manage dependencies with [Bower](http://bower.io). Set `baseUrl` to `bower_components` and set a path config for all your application code.
Use `.makeJQueryPlugin` to make `.imagesLoaded()` jQuery plugin.
``` js
requirejs( [
'jquery',
'path/to/imagesloaded.pkgd.js',
], function( $, imagesLoaded ) {
// provide jQuery argument
imagesLoaded.makeJQueryPlugin( $ );
// now use .imagesLoaded() jQuery plugin
$('#container').imagesLoaded( function() {...});
});
```
You can manage dependencies with [Bower](http://bower.io). Set `baseUrl` to `bower_components` and set a path config for all your application code.
``` js
requirejs.config({

@@ -217,2 +377,9 @@ baseUrl: 'bower_components/',

## Browser support
+ IE8+
+ Android 2.3+
+ iOS Safari 4+
+ All other modern browsers
## Contributors

@@ -219,0 +386,0 @@ 

Gruntfile.js
imagesloaded.jquery.json
test/append.js
test/basics.js
test/data-uri.js
test/jquery-fail.js
test/jquery-success.js
test/local-files.js
test/no-images.js
test/non-element.js
test/selector-string.js
test/single-element.js
test/tests.css
.jshintrc

Sorry, the diff of this file is not supported yet

test/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc