Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/david-desmaisons/vue.imagesloaded
Vue.js 2.0 directive to detect images loading
https://github.com/david-desmaisons/vue.imagesloaded
directive imagesloaded vue2
Last synced: 6 days ago
JSON representation
Vue.js 2.0 directive to detect images loading
- Host: GitHub
- URL: https://github.com/david-desmaisons/vue.imagesloaded
- Owner: David-Desmaisons
- License: mit
- Created: 2016-12-31T01:04:53.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-07-03T22:35:29.000Z (over 3 years ago)
- Last Synced: 2024-09-24T14:43:11.310Z (9 days ago)
- Topics: directive, imagesloaded, vue2
- Language: JavaScript
- Homepage:
- Size: 3.09 MB
- Stars: 145
- Watchers: 2
- Forks: 22
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue.ImagesLoaded
[](https://github.com/David-Desmaisons/Vue.ImagesLoaded/issues?q=is%3Aopen+is%3Aissue)
[](https://github.com/David-Desmaisons/Vue.ImagesLoaded/issues?q=is%3Aissue+is%3Aclosed)
[](https://www.npmjs.com/package/vue-images-loaded)
[](https://www.npmjs.com/package/vue-images-loaded)
[](https://vuejs.org/)
[](https://github.com/David-Desmaisons/Vue.ImagesLoaded/blob/master/LICENSE)
A Vue.js 2.0 directive to detect when images have been loaded, based on [imagesLoaded](http://imagesloaded.desandro.com/)
This directive allows to get a callback when children images are loaded in a container element.
Plays nicely with [vue.isotope](https://github.com/David-Desmaisons/Vue.Isotope) to allow re-layout when images are loaded.
## Demo
## Typical usage
```HTML
![]()
```
```javascript
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
```HTML
{{element.name}}
{{element.id}}
![Not found]()
```
```javascript
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:
```HTML
```
Directive value:
```javascript
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:
```HTML
```
Directive value:
```javascript
listener:{
done(instance){
//...
},
fail(instance){
//...
}
}
```
listener is an `Object` containing callback functions.
Function should be named and will received arguments as described in [Imagesloaded](http://imagesloaded.desandro.com/)
- When used with `on` argument and modifier:
```HTML
```
Directive value:
```javascript
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:
``` js
npm install vue-images-loaded --save
```
``` js
bower install vue.ImagesLoaded -save
```
- #### For Modules
``` js
// ES6
import imagesLoaded from 'vue-images-loaded'
...
export default {
directives: {
imagesLoaded,
}
...
// ES5
var imagesLoaded = require('vue-images-loaded')
```
- #### For `` Include
Just include `vueimagesloaded.js` after `imagesloaded.pkgd.min.js` script.<br>