前言
当我们在网页中引入 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>