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.
Demo
Typical usage
<div v-images-loaded:on.progress="imageProgress"> <div v-for="element in list"> <img :src="element.src"> </div></div>
directives: imagesLoaded methods: { const result = imageisLoaded ? 'loaded' : 'broken'; console; }
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>
directives: imagesLoaded methods: { this$refscpt; }
API
Using directive
- When used without argument nor modifiers:
<div v-images-loaded:"loaded">
Directive value:
{ //...}
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: { //... } { //... }
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:
{ //...}
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 vueImagesLoaded -save
-
#### For Modules
// ES6...directives:imagesLoaded...// ES5var imagesLoaded = -
#### For
<script>
IncludeJust include
vueimagesloaded.js
afterimagesloaded.pkgd.min.js
script.