angular-imagesloaded

angular-imagesloaded

:camera: :white_check_mark: AngularJS integration for the imagesloaded library.

:tv: Demos and Examples

Comments and Pull Requests welcome!

Contents

• Installation
• Dependencies
• Usage
• Events
• Development
• About imagesloaded

Installation

NPM

npm install angular-imagesloaded --save

Bower

bower install angular-imagesloaded --save

Manual

<script src="path/to/lib/dist/angular-imagesloaded.min.js"></script>

Dependencies

• Angular.js (^1.4.0)
• imagesloaded (^4.1.1)

Usage

Include bc.imagesloaded as a dependency in your project:

angular.module('YourModule', ['bc.imagesloaded']);

bc-imagesloaded

Use this directive directly on an image as an attribute to create an imagesloaded instance for that specific image:

<img
  src="http://lorempixel.com/400/300"
  bc-imagesloaded
  alt=""
/>

:tv: Element usage demo

You can also pass in a selector string, NodeList or array to target multiple child elements:

<div bc-imagesloaded=".test">
  <img
    class="test"
    src="http://lorempixel.com/400/300"
    alt=""
  />
  <img
    class="test"
    src="http://lorempixel.com/400/300"
    alt=""
  />
</div>

:tv: Selector string demo

bc-background

Set this attribute to true to enable imagesloaded on the background of the current element:

<div
  bc-imagesloaded
  bc-background="true"
  style="background-image: url(http://lorempixel.com/400/300)"
></div>

You can also pass in a selector string to enable imagesloaded on multiple child elements:

<div
  bc-imagesloaded
  bc-background=".test"
>
  <div
    class="test"
    style="background-image: url(http://lorempixel.com/400/300)"
  ></div>
  <div
    class="test"
    style="background-image: url(http://lorempixel.com/400/300)"
  ></div>
</div>

:tv: Background image demo

'bc-debug'

When this attribute is set to true, imagesloaded will output debug logs to the console.

<img
  src="http://lorempixel.com/400/300"
  bc-imagesloaded
  bc-debug="true"
  alt=""
/>

:tv: Debug flag demo

Events

Events can help ....

Always

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

Available Parameters:

Param	Type	Details
instance	Object	The imagesLoaded instance

<div
  bc-imagesloaded=".image"
  bc-always-method="vm.yourAlwaysMethod(instance)"
>
  <img class="image" src="http://lorempixel.com/100/100" alt="" />
  <img class="image" src="http://lorempixel.com/100/100" alt="" />
  <img class="image" src="image/does/not/exist.jpg" alt="" />
</div>

class YourController {

  constructor() {}

  // This method will be called after all images are either loaded or confirmed broken
  yourAlwaysMethod(instance) {
    console.log('Images finished! Instance: ', instance)
  }

}

:tv: Always event demo

Done

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

Available Parameters:

Param	Type	Details
instance	Object	The imagesLoaded instance

<div
  bc-imagesloaded=".image"
  bc-always-method="vm.yourDoneMethod(instance)"
>
  <img class="image" src="http://lorempixel.com/100/100" alt="" />
  <img class="image" src="http://lorempixel.com/100/100" alt="" />
</div>

class YourController {

  constructor() {}

  // This method will be called after all images have loaded successfully
  yourDoneMethod(instance) {
    console.log('All images loaded successfully! Instance: ', instance)
  }

}

:tv: Done event demo

Fail

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

Available Parameters:

Param	Type	Details
instance	Object	The imagesLoaded instance

<div
  bc-imagesloaded=".image"
  bc-always-method="vm.yourFailMethod(instance)"
>
  <img class="image" src="http://lorempixel.com/100/100" alt="" />
  <img class="image" src="http://lorempixel.com/100/100" alt="" />
  <img class="image" src="image/does/not/exist.jpg" alt="" />
</div>

class YourController {

  constructor() {}

  // This method will be called after all images have loaded and at least one is broken
  yourFailMethod(instance) {
    console.log('All images loaded; at least one is broken! Instance: ', instance)
  }

}

:tv: Fail event demo

Progress

Triggered after each image has been loaded.

Available Parameters:

Param	Type	Details
instance	Object	The imagesLoaded instance
image	Object	The LoadingImage instance of the loaded image

<div
  bc-imagesloaded=".image"
  bc-always-method="vm.yourProgressMethod(instance, image)"
>
  <img class="image" src="http://lorempixel.com/100/100" alt="" />
  <img class="image" src="http://lorempixel.com/100/100" alt="" />
</div>

class YourController {

  constructor() {}

  // This method will be called after EACH image is loaded
  yourProgressMethod(instance, image) {
    console.log('An image was loaded! Instance: ', instance, ' Image: ', image)
  }

}

:tv: Progress event demo

Development

• npm run build - Build JS
• npm run watch - Watch JS and rebuild on change
• npm run test - Run tests
• npm run watch:tests - Watch test files and re-run tests on change

About imagesloaded

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

Created by David DeSandro.

• imagesloaded on Github
• imagesloaded Documentation