PHPackages                             heimrichhannot/masonry-imagesloaded - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. heimrichhannot/masonry-imagesloaded

Abandoned → [composer require heimrichhannot-contao-components/imagesloaded](/?search=composer%20require%20heimrichhannot-contao-components%2Fimagesloaded)Contao-component

heimrichhannot/masonry-imagesloaded
===================================

JavaScript is all like \_You images done yet or what?\_

4.1.1(8y ago)0458MITJavaScript

Since Jun 26Pushed 8y ago5 watchersCompare

[ Source](https://github.com/heimrichhannot/masonry-imagesloaded)[ Packagist](https://packagist.org/packages/heimrichhannot/masonry-imagesloaded)[ Docs](http://imagesloaded.desandro.com)[ RSS](/packages/heimrichhannot-masonry-imagesloaded/feed)WikiDiscussions master Synced 2mo ago

READMEChangelogDependencies (1)Versions (2)Used By (0)

imagesLoaded
============

[](#imagesloaded)

> Abandoned! See [heimrichhannot-contao-components/imagesloaded](https://github.com/heimrichhannot-contao-components/imagesloaded) instead!

JavaScript is all like "You images done yet or what?"

[imagesloaded.desandro.com](http://imagesloaded.desandro.com)

Detect when images have been loaded.

Install
-------

[](#install)

### Download

[](#download)

- [imagesloaded.pkgd.min.js](https://npmcdn.com/imagesloaded@4/imagesloaded.pkgd.min.js) minified
- [imagesloaded.pkgd.js](https://npmcdn.com/imagesloaded@4/imagesloaded.pkgd.js) un-minified

### CDN

[](#cdn)

```

```

### Package managers

[](#package-managers)

Install via [npm](https://www.npmjs.com/package/imagesloaded): `npm install imagesloaded`

Install via [Bower](http://bower.io): `bower install imagesloaded --save`

jQuery
------

[](#jquery)

You can use imagesLoaded as a jQuery Plugin.

```
$('#container').imagesLoaded( function() {
  // images have loaded
});

// options
$('#container').imagesLoaded( {
  // options...
  },
  function() {
    // images have loaded
  }
);
```

`.imagesLoaded()` returns a [jQuery Deferred object](http://api.jquery.com/category/deferred-object/). This allows you to use `.always()`, `.done()`, `.fail()` and `.progress()`.

```
$('#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
------------------

[](#vanilla-javascript)

You can use imagesLoaded with vanilla JS.

```
imagesLoaded( elem, callback )
// options
imagesLoaded( elem, options, callback )
// you can use `new` if you like
new imagesLoaded( elem, callback )
```

- `elem` *Element, NodeList, Array, or Selector String*
- `options` *Object*
- `callback` *Function* - function triggered after all images have been loaded

Using a callback function is the same as binding it to the `always` event (see below).

```
// element
imagesLoaded( document.querySelector('#container'), function( instance ) {
  console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {...});
// multiple elements
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});
```

Bind events with vanilla JS with .on(), .off(), and .once() methods.

```
var imgLoad = imagesLoaded( elem );
function onAlways( instance ) {
  console.log('all images are loaded');
}
// bind with .on()
imgLoad.on( 'always', onAlways );
// unbind with .off()
imgLoad.off( 'always', onAlways );
```

Background
----------

[](#background)

Detect when background images have loaded, in addition to ``s.

Set `{ background: true }` to detect when the element's background image has loaded.

```
// 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');
});
```

[See jQuery demo](http://codepen.io/desandro/pen/pjVMPB) or [vanilla JS demo](http://codepen.io/desandro/pen/avKooW) on CodePen.

Set to a selector string like `{ background: '.item' }` to detect when the background images of child elements have loaded.

```
// 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');
});
```

[See jQuery demo](http://codepen.io/desandro/pen/avKoZL) or [vanilla JS demo](http://codepen.io/desandro/pen/vNrBGz) on CodePen.

Events
------

[](#events)

### always

[](#always)

```
// jQuery
$('#container').imagesLoaded().always( function( instance ) {
  console.log('ALWAYS - all images have been loaded');
});

// vanilla JS
imgLoad.on( 'always', function( instance ) {
  console.log('ALWAYS - all images have been loaded');
});
```

Triggered after all images have been either loaded or confirmed broken.

- `instance` *imagesLoaded* - the imagesLoaded instance

### done

[](#done)

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

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

Triggered after all images have successfully loaded without any broken images.

### fail

[](#fail)

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

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

Triggered after all images have been loaded with at least one broken image.

### progress

[](#progress)

```
imgLoad.on( 'progress', function( instance, image ) {
  var result = image.isLoaded ? 'loaded' : 'broken';
  console.log( 'image is ' + result + ' for ' + image.img.src );
});
```

Triggered after each image has been loaded.

- `instance` *imagesLoaded* - the imagesLoaded instance
- `image` *LoadingImage* - the LoadingImage instance of the loaded image

Properties
----------

[](#properties)

### LoadingImage.img

[](#loadingimageimg)

*Image* - The `img` element

### LoadingImage.isLoaded

[](#loadingimageisloaded)

*Boolean* - `true` when the image has succesfully loaded

### imagesLoaded.images

[](#imagesloadedimages)

Array of *LoadingImage* instances for each image detected

```
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