A Vue.js 2.0 directive to detect images loading

Vue.ImagesLoaded

A Vue.js 2.0 directive to detect when images have been loaded, based on imagesLoaded

This directive allows to get a callback when children images are loaded in a container element.
Plays nicely with vue.isotope to allow re-layout when images are loaded.

Typical usage

<div v-images-loaded:on.progress="imageProgress">
	<div v-for="element in list">
		<img :src="element.src">
	</div>
</div>

import imagesLoaded from 'vue-images-loaded'

export default {
    directives: {
        imagesLoaded
    },
    methods: {
        imageProgress(instance, image ) {
        const result = image.isLoaded ? 'loaded' : 'broken';
        console.log( 'image is ' + result + ' for ' + image.img.src );
    }

Isotope Example

<isotope ref="cpt" :options='getOptions()' v-images-loaded:on.progress="layout" :list="list">
    <div v-for="element in list" :key="element.id"  @click="selected=element">
        {{element.name}}
        <br>
        {{element.id}}
        <img :src="element.src" alt="Not found">
    </div>
</isotope>

import imagesLoaded from 'vue-images-loaded'

export default {
    directives: {
        imagesLoaded
    },
    methods: {
        layout () {
            this.$refs.cpt.layout('masonry');
        }     
    }

API

Using directive

• When used without argument nor modifiers:

<div v-images-loaded:"loaded">

Directive value:

function loaded(instance){
    //...
}

loaded is a Function triggered after all images have been either loaded or confirmed broken.

Function parameter: ImagesLoaded instance

• When used with on argument but no modifiers:

<div v-images-loaded.on:"listener">

Directive value:

listener:{
    done(instance){
        //...
    },
    fail(instance){
        //...
    }
}

listener is an Object containing callback functions.

Function should be named and will received arguments as described in Imagesloaded

• When used with on argument and modifier:

<div v-images-loaded.on.progress:"callback">

Directive value:

function callback(instance, img){
    //...
}

callback is a Function triggered acording to modifier name always, done, fail, progress.

Function parameter: ImagesLoaded instance, and image information for progess only.

ImagesLoaded instance

• Properties:

  • imagesLoaded.images
    

    Array of LoadingImage instances for each image detected
    

LoadingImage instance

• Property:

  • LoadingImage.img

    Image - The img element

  • LoadingImage.isLoaded

    Boolean - true when the image has succesfully loaded

Installation

• Available through bower and npm:

 npm install vue-images-loaded --save

 bower install vue.ImagesLoaded -save

• For Modules

  // ES6
  import imagesLoaded from 'vue-images-loaded'
  ...
  export default {
        directives: {
            imagesLoaded,
        }
    ...
  
  // ES5
  var imagesLoaded = require('vue-images-loaded')
  

• For <script> Include

  Just include vueimagesloaded.js after imagesloaded.pkgd.min.js script.

GitHub