vue-images-loaded
v1.1.2
Published
Vue.js 2.0 directive to detect image loading
Downloads
14,660
Maintainers
Readme
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>
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 elementLoadingImage.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>
IncludeJust include
vueimagesloaded.js
afterimagesloaded.pkgd.min.js
script.