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