Vue.ImagesLoaded (Vue.ImagesLoaded)
A Vue.js 2.0 directive to detect when images have been loaded, based on imagesLoaded
一个Vue.js 2.0指令,用于根据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.
当子图像加载到容器元素中时,此伪指令允许获取回调。 与vue.isotope配合使用,可以在加载图像时重新布局。
![VueImagesLoaded](https://i-blog.csdnimg.cn/blog_migrate/e65914156bbdffab9d8c6d20b4ece32a.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 (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
加载是在所有图像都已加载或已确认损坏后触发的Function
。 函数参数:ImagesLoaded实例
When used with
on
argument but no modifiers:与
on
参数一起使用但不带修饰符时:
<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
侦听器是一个包含回调函数的Object
。 函数应被命名,并将如Imagesloaded中所述接收参数
When used with
on
argument and modifier:与
on
参数和修饰符一起使用时:
<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.
回调是根据修改器名称always
, done
, fail
, progress
触发的Function
。 功能参数:ImagesLoaded实例,对图像信息progess
只。
ImagesLoaded实例 (ImagesLoaded instance)
Properties:
特性:
imagesLoaded.images
imagesLoaded.images
Array
of LoadingImage instances for each image detected每个检测到的图像的LoadingImage实例的
Array
LoadingImage实例 (LoadingImage instance)
Property:
属性:
LoadingImage.img
LoadingImage.img
Image
- The img elementImage
-img元素LoadingImage.isLoaded
LoadingImage.isLoaded
Boolean
- true when the image has succesfully loadedBoolean
-成功加载图像时为true
安装 (Installation)
Available through bower and npm:
可通过bower和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')
-
对于
<script>
包括 (For<script>
Include)Just include
vueimagesloaded.js
afterimagesloaded.pkgd.min.js
script.仅在
imagesloaded.pkgd.min.js
脚本之后包含vueimagesloaded.js
。
翻译自: https://vuejsexamples.com/a-vue-js-2-0-directive-to-detect-images-loading/