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.

VueImagesLoaded

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