Vue 实现 iframe 内容加载慢的 loading 效果

2023-10-13 18:50:58

Vue 中 iframe 的内容加载慢，如何实现加载（Loading）效果？

iframe 是一种 HTML 元素，允许您在网页中嵌入其他网页或文档。当 iframe 的内容加载缓慢时，可能会给用户带来糟糕的体验。为了解决这个问题，我们可以使用 loading 效果来让用户知道 iframe 正在加载中。

实现 Vue 中 iframe 内容加载慢的 loading 效果有多种方法，这里提供一种使用加载完成事件和 CSS 过渡的解决方案：

创建 iframe 组件

首先，创建一个 Vue 组件来封装 iframe。这个组件将负责加载 iframe 并显示 loading 效果。

<template>
  <div>
    <iframe :src="src" @load="handleLoad" @error="handleError" />
    <div v-if="loading" class="loading">Loading...</div>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      loading: true,
    };
  },
  methods: {
    handleLoad() {
      this.loading = false;
    },
    handleError() {
      this.loading = false;
    },
  },
};
</script>

<style>
.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
  opacity: 0.5;
  z-index: 10;
  text-align: center;
  line-height: 100px;
  font-size: 16px;
  color: #333;
}
</style>

使用加载完成事件和 CSS 过渡

接下来，我们需要使用加载完成事件来监听 iframe 是否加载完成。当 iframe 加载完成时，我们将使用 CSS 过渡来淡出 loading 效果。

<template>
  <div>
    <iframe-component :src="src" />
  </div>
</template>

<script>
export default {
  components: {
    IframeComponent,
  },
  data() {
    return {
      src: 'https://www.example.com',
    };
  },
};
</script>