一个Vue.js 2.0指令来检测图像加载

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配合使用，可以在加载图像时重新布局。

典型用法 (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 element

    Image -img元素

  • LoadingImage.isLoaded

    LoadingImage.isLoaded

    Boolean - true when the image has succesfully loaded

    Boolean -成功加载图像时为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 after imagesloaded.pkgd.min.js script.

  仅在imagesloaded.pkgd.min.js脚本之后包含vueimagesloaded.js 。

翻译自: https://vuejsexamples.com/a-vue-js-2-0-directive-to-detect-images-loading/