如何使用iframe加载loading效果让你的网站更加专业

前言

当我们在网页中引入 iframe 标签时，经常会遇到加载速度缓慢或者加载时间较长的情况。这不仅会影响用户体验，还会对网站的流量和收益产生负面影响。为了解决这个问题，我们可以使用各种方法来实现 iframe 加载 loading 效果，从而提升用户的体验感和网站的整体性能。本文将介绍实现 iframe 加载 loading 效果的方法，帮助您更好地应对这一问题。

---

优化效果：

---

因为 iframe 加载缓慢，所以在它加载完成前添加 loading 效果，loading 用的是 element 的加载效果。

---

实现代码：

<template>
  <div class="vesselBox" v-loading="loading">
    <iframe ref="Iframe" src="https://vant-contrib.gitee.io/vant/v2/#/zh-CN/" width="100%" height="100%" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false, //默认不显示loading
    };
  },
  mounted() {
    this.iframeLoad();
  },
  methods: {
    // 调用方法
    iframeLoad() {
      this.loading = true;
      const iframe = this.$refs.Iframe;
      // 兼容处理
      if (iframe.attachEvent) {
        // IE
        iframe.attachEvent("onload", () => {
          this.loading = false;
        });
      } else {
        // 非IE
        iframe.onload = () => {
          this.loading = false;
        };
      }
    },
  },
};
</script>
<style scoped>
.vesselBox {
  height: 100%;
}
</style>