2017 © Pedro Peláez
 

contao-component masonry-imagesloaded

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

image

heimrichhannot/masonry-imagesloaded

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

  • Tuesday, January 30, 2018
  • by digitales@heimrich-hannot.de
  • Repository
  • 6 Watchers
  • 0 Stars
  • 391 Installations
  • JavaScript
  • 0 Dependents
  • 0 Suggesters
  • 0 Forks
  • 0 Open issues
  • 2 Versions
  • 2 % Grown

The README.md

imagesLoaded

Abandoned! See heimrichhannot-contao-components/imagesloaded instead!, (*1)

JavaScript is all like "You images done yet or what?", (*2)

imagesloaded.desandro.com, (*3)

Detect when images have been loaded., (*4)

Install

Download

CDN

``` html , (*5)


### 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 You can use imagesLoaded as a jQuery Plugin. ``` js $('#container').imagesLoaded( function() { // images have loaded }); // options $('#container').imagesLoaded( { // options... }, function() { // images have loaded } );

.imagesLoaded() returns a jQuery Deferred object. This allows you to use .always(), .done(), .fail() and .progress()., (*6)

``` 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 ); });, (*7)


## 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 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)., (*8)

``` js // 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() {...});, (*9)


Bind events with vanilla JS with .on(), .off(), and .once() methods. ``` js 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

Detect when background images have loaded, in addition to <img>s., (*10)

Set { background: true } to detect when the element's background image has loaded., (*11)

``` js // jQuery $('#container').imagesLoaded( { background: true }, function() { console.log('#container background image loaded'); });, (*12)

// vanilla JS imagesLoaded( '#container', { background: true }, function() { console.log('#container background image loaded'); });, (*13)


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

See jQuery demo or vanilla JS demo on CodePen., (*14)

Events

always

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

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


Triggered after all images have been either loaded or confirmed broken. + `instance` _imagesLoaded_ - the imagesLoaded instance ### done ``` js // 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., (*17)

fail

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

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


Triggered after all images have been loaded with at least one broken image. ### progress ``` js 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., (*20)

  • instance imagesLoaded - the imagesLoaded instance
  • image LoadingImage - the LoadingImage instance of the loaded image

Properties

LoadingImage.img

Image - The img element, (*21)

LoadingImage.isLoaded

Boolean - true when the image has succesfully loaded, (*22)

imagesLoaded.images

Array of LoadingImage instances for each image detected, (*23)

``` js 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 ); } });, (*24)


## Browserify imagesLoaded works with [Browserify](http://browserify.org/). ``` bash npm install imagesloaded --save

``` js var imagesLoaded = require('imagesloaded');, (*25)

imagesLoaded( elem, function() {...} );, (*26)


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 with npm., (*27)

``` bash npm install imagesloaded, (*28)


You can then `require('imagesloaded')`. ``` js // main.js var imagesLoaded = require('imagesloaded'); imagesLoaded( '#container', function() { // images have loaded });

Use .makeJQueryPlugin to make .imagesLoaded() jQuery plugin., (*29)

``` js // main.js var imagesLoaded = require('imagesloaded'); var $ = require('jquery');, (*30)

// provide jQuery argument imagesLoaded.makeJQueryPlugin( $ ); // now use .imagesLoaded() jQuery plugin $('#container').imagesLoaded( function() {...});, (*31)


Run webpack. ``` bash webpack main.js bundle.js

RequireJS

imagesLoaded works with RequireJS., (*32)

You can require imagesloaded.pkgd.js., (*33)

``` js requirejs( [ 'path/to/imagesloaded.pkgd.js', ], function( imagesLoaded ) { imagesLoaded( '#container', function() { ... }); });, (*34)


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. Set baseUrl to bower_components and set a path config for all your application code., (*35)

``` js requirejs.config({ baseUrl: 'bower_components/', paths: { // path to your app app: '../' } });, (*36)

requirejs( [ 'imagesloaded/imagesloaded', 'app/my-component.js' ], function( imagesLoaded, myComp ) { imagesLoaded( '#container', function() { ... }); }); ```, (*37)

Browser support

  • IE9+
  • Android 2.3+
  • iOS Safari 4+
  • All other modern browsers

Use imagesLoaded v3 for IE8 support., (*38)

MIT License

imagesLoaded is released under the MIT License. Have at it., (*39)

The Versions

30/01 2018

dev-master

9999999-dev http://imagesloaded.desandro.com

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

  Sources   Download

MIT

The Requires

 

library ui javascript dom images jquery-plugin loaded

26/06 2017

4.1.1

4.1.1.0 http://imagesloaded.desandro.com

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

  Sources   Download

MIT

The Requires

 

library ui javascript dom images jquery-plugin loaded