Home

Awesome

Vue.ImagesLoaded

GitHub open issues GitHub closed issues Npm download Npm version vue2 MIT License

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.<br> Plays nicely with vue.isotope to allow re-layout when images are loaded.

Demo

demo gif

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

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

Directive value:<br>

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

loaded is a Function triggered after all images have been either loaded or confirmed broken.<br> Function parameter: ImagesLoaded instance

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

Directive value:<br>

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

listener is an Object containing callback functions.<br> Function should be named and will received arguments as described in Imagesloaded

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

Directive value:<br>

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

callback is a Function triggered acording to modifier name always, done, fail, progress.<br> Function parameter: ImagesLoaded instance, and image information for progess only.

ImagesLoaded instance

LoadingImage instance

Installation

 npm install vue-images-loaded --save
 bower install vue.ImagesLoaded -save