iframe 加载loading效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iframe 加载loading效果相关的知识，希望对你有一定的参考价值。
<script type="text/javascript">
function SetCwinHeight()
var bobo=document.getElementById("bobo"); //iframe id
if (document.getElementById)
if (bobo && !window.opera)
if (bobo.contentDocument && bobo.contentDocument.body.offsetHeight)
bobo.height = bobo.contentDocument.body.offsetHeight;
else if(bobo.Document && bobo.Document.body.scrollHeight)
bobo.height = bobo.Document.body.scrollHeight;
</script>
<table width="984" border="0" align="center" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="984" height="3"><iframe width="100%" id="bobo" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="index.asp"></iframe></td>
</tr>
这是我首页的iframe加载的源码，主要是加载时打开太慢，影响访客以为首页没有内容
现在我想在这个代码加载一个loading的效果,加载完成之后内容就全部出现了，loading这个图片也就消失了。
这个loading的图片http://sysimages.tq.cn/images/analysis_images/ajax-loader.gif
请问这段代码怎么加，回哪里。请最好详细点，本人菜鸟。。。
我会加分的。。。
<body>
<div id="loading" style="position;absolute;width:100%;height:100%;padding:90px;">
<img src="http://sysimages.tq.cn/images/analysis_images/ajax-loader.gif ">
</div>
.
.
.
.
.
<script>document.getElementById('loading').style.display='none';</script>
</body> 参考技术A 纠正你一个看法,javascript不能知道当前页面的元素是否已经下载完,所以javascript的进度条是不会有实际价值的,
教你一个我以前用过得办法,首先统计一下平均打开首页得时间,然后创建一个过渡页面,在该页面中放进度条,然后把所有需要的图片flash等全部放到这个页面中并隐藏起来,然后设置该页面过段时间就自动跳转到真正得首页(时间就是你统计出来得打开首页需要得时间,定时跳转的方法网上很多,自己查一下就可以了),这样用户到了这个页面之后就会下载到这些素材,而到了真正得首页时缓存中就已经有了这些素材,不用重新下载了. 参考技术B 那是ajax实现的，先学学ajax吧 参考技术C ajax！！
参考资料：dev.yesky.com/ajax
Vue中 iframe 的内容加载慢，实现加载（Loading）效果
需求：
由于 iframe 的内容加载较慢，需要在加载完成前添加 loading 效果。
本文 loading 使用的是 Element 框架的加载（Loading）组件。
功能实现完整代码
<template>
<div style="height:1000px;" v-loading="loading">
<iframe
ref="Iframe"
src="https://www.taobao.com/"
width="100%"
height="100%"
frameborder="0">
</iframe>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
};
},
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; };
}
}
},
mounted() {
this.iframeLoad();
},
};
</script>
延伸
< iframe > 标签属性
| 属性 | 值 | 描述 |
|---|---|---|
| frameborder | 1 有边框（默认值）；0 关闭边框 | 规定是否显示 iframe 周围的边框 |
| height | px；%； | 规定 iframe 的高度 |
| longdesc | URL | 规定一个页面，该页面包含了有关 iframe 的较长描述 |
| marginheight | px | 定义 iframe 的顶部和底部的边距 |
| marginwidth | px | 定义 iframe 的左侧和右侧的边距 |
| name | frame_name | 规定 iframe 的名称 |
| scrolling | yes ； no ； auto； | 规定是否在 iframe 中显示滚动条 |
| seamless | seamless | 规定 < iframe > 看上去像是包含文档的一部分 |
| src | URL | 规定在 iframe 中显示的文档的 URL |
| srcdoc | HTML_code | 规定在 < iframe > 中显示的页面的 HTML 内容 |
| width | px； %； | 定义 iframe 的宽度 |
全局属性
< iframe > 标签支持 HTML 中的全局属性。
事件属性
< iframe > 标签支持 HTML 中的事件属性。
以上是关于iframe 加载loading效果的主要内容，如果未能解决你的问题，请参考以下文章
iframe 加载外部资源，显示隐藏loading，onload失效