vue3中 vue-lazyload的@loaded不生效

可能是因为您没有正确设置@loaded回调函数。在Vue3中，您需要使用v-on来设置回调函数，而不是使用@loaded。以下是一个示例代码：

<template>
  <img v-lazy="imageSrc" v-on:loaded="onImageLoaded" />
</template>

<script>
import { defineComponent } from 'vue';
import VueLazyload from 'vue3-lazyload';

export default defineComponent({
  components: { VueLazyload },
  data() {
    return {
      imageSrc: 'your-image-source',
    };
  },
  methods: {
    onImageLoaded() {
      console.log('Image loaded!');
    },
  },
});
</script>

请注意，我们使用v-on:loaded来设置回调函数onImageLoaded。您可以在回调函数中执行任何操作，例如显示一个加载完成的消息或执行其他操作。

相关问题

vue3中 vue-lazyload的事件

vue-lazyload是一个Vue.js的懒加载插件，它可以延迟加载图片，优化页面性能。在Vue3中，vue-lazyload的事件有以下几个：

1. loaded：图片加载完成后触发的事件。

2. error：图片加载失败时触发的事件。

3. loading：图片加载中时触发的事件。

这些事件可以通过在Vue组件中使用v-lazy指令来触发。例如：

<template>
  <div>
    <img v-lazy="imageSrc" @loaded="onLoaded" @error="onError" @loading="onLoading">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/image.jpg'
    }
  },
  methods: {
    onLoaded() {
      console.log('Image loaded.');
    },
    onError() {
      console.log('Image failed to load.');
    },
    onLoading() {
      console.log('Image is loading.');
    }
  }
}
</script>

在上面的代码中，当图片加载完成后，onLoaded方法将被调用；当图片加载失败时，onError方法将被调用；当图片正在加载时，onLoading方法将被调用。

vue-lazyload使用方法

`vue-lazyload` 是一个 Vue.js 图片懒加载插件，可以用于优化网页加载速度和提升用户体验。下面是使用 `vue-lazyload` 的方法：

1. 安装 `vue-lazyload`

使用 npm 命令安装 `vue-lazyload`：

npm install vue-lazyload --save

2. 引入 `vue-lazyload` 插件

在 Vue 项目中的 `main.js` 文件中引入 `vue-lazyload` 插件，并在 Vue 实例中注册：

import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload);

3. 在组件中使用 `v-lazy` 指令

在需要懒加载的图片上使用 `v-lazy` 指令，并将要懒加载的图片地址作为 `v-lazy` 的值绑定到 `img` 标签上即可。例如：

<template>
  <div>
    <img v-lazy="imageUrl" alt="lazy-loaded image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'your_image_url_here'
    };
  }
}
</script>

在上面的代码中，`imageUrl` 是你需要懒加载的图片地址。

需要注意的是，`vue-lazyload` 插件还提供了一些配置选项，例如懒加载时显示的占位图、懒加载的距离阈值等，可以根据实际情况进行配置。具体的配置方法可以参考 `vue-lazyload` 的官方文档。