javscript 实现iframe加载内容页出现LOADING效果
<div id="load" align="center">
<img src="http://sc.cnwebshow.com/upimg/allimg/070707/01294420.gif" /> loading
</div> <!-- 首先放一个div,用做loading效果 -->
<iframe id="demo" src="http://www.****.com" width="100%" height="800" frameborder="0" scrolling="no" marginheight="0"></iframe> <!-- src 里面放你想要的网页-->
<script type="text/javascript">
//<![CDATA[
var a = document.getElementById("demo");
var b = document.getElementById("load");
a.style.display = "none"; //隐藏
b.style.display = "block"; //显示
a.onreadystatechange = function() {
if (this.readyState=="complete") { //最近才知道的。不然也写不出来。
// 解释:一个iframe加载完毕的状态是complete,
// 就象xmlhttp里的那个==4一样,这些都是规定的
b.innerHTML = "load complete!";
b.style.display = "none";
a.style.display = "block";
}
}
//]]>
</script>
iframe加载内容页实现LOADING效果,即iframe加载的内容完全下载完后现显示出来。LOADING消失
javscript 实现iframe加载内容页出现LOADING效果的更多相关文章
- 使用pjax时点击浏览器刷新按钮仅加载内容页的解决办法
pjax可以实现ajax的局部刷新功能,同时能改变地址栏的URL,因此支持浏览器的后退和前进功能. 但是,在使用中,若没有正确使用,仍然会出现一些问题. 比如,我们在使用pjax后,能够在不加载整个页 ...
- vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...
- vue实现ajax滚动下拉加载,同时具有loading效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js实现所有异步请求全部加载完毕后,loading效果消失
在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了ajax,在这种情况下,我们要实现数据没来之前出现我们炫酷的loading效果,而且要等到所有的ajax都请求完毕后,才让我们的loadi ...
- vue中iframe加载慢,给它加loading效果
js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> < ...
- jquery easyui tab加载内容的几种方法
转:http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页 ...
- iframe加载方案及性能
普通方法加载iframe 在onload之后加载iframe setTimeout来加载iframe 友好型iframe加载 转载地址:翻译文章-iframe异步加载技术及性能 英文原文:Iframe ...
- paip.gui控件tabs控件加载内容的原理以及easyui最佳实现
paip.gui控件tabs控件加载内容的原理以及easyui最佳实现 //////////////tabs控件的加载 同form窗体一样,俩个方式 两个方式:一个是url,简单的文本可以使用这个,不 ...
- 在ASP.NET中动态加载内容(用户控件和模板)
在ASP.NET中动态加载内容(用户控件和模板) 要点: 1. 使用Page.ParseControl 2. 使用base.LoadControl 第一部分:加载模板 下 面是一个模板“<tab ...
随机推荐
- ubuntu下node.js 环境搭建
由于使用gulp.js来对前端项目进行管理,所以搭建了node.js的环境 首先, 需要安装node, npm 去官网下载安装包,解压后放到你的安装的目录.在这里我的是/opt/node-v6.11. ...
- 广播接收者实现IP拨号
广播接收者实现IP拨号 效果图: 实现的功能就是自动监听我们要拨打的号码,在我们拨打的号码前加上179521 分析: 1.敲个类来继承广播接收者 并且将从打电话应用位置获取的号码加上179521,并将 ...
- Jmeter 5.1 从excel读取数据执行接口自动化
思路:数据在excel文件中进行维护,然后转换成csv格式,jme中读取数据执行: 1.将接口各数据在excel文件中进行维护,然后存为csv格式,我的数据如下: 2.jmeter脚本,配置csv文件 ...
- javascript: 禁用右键、文本选择功能、复制按键
<script type="text/javascript"> //禁用右键.文本选择功能.复制按键 //http://www.jinyuanbao.cn $(docu ...
- Linux(Ubuntu)常用命令(二)
归档管理: 打包: tar -cvf xxx.tar 打包对象 (一般来说就是 -cvf 一起用)但这种不压缩的打包通常不用,接下来会说. -options:-c 生成档案文件,创建打包文件. ...
- appium常见问题08_pycharm中导入appium报错( 已成功安装appium_python_client)【MAC】
问题: 成功安装配置好python+appium自动化环境后,其中appium-python-client已安装好.但是在pycharm中编写自动化脚本时,导入appium,发现appium报红无法使 ...
- str方法
'capitalize', 'casefold', 'center', 'count', 'encode', 'endswith', 'expandtabs', 'find', 'format', ' ...
- boby标签中相关标签
有关字体相关的标签 h1~h6 字体大小 标题使用<h1>至<h6>标签进行定义,<h1>定义最大的标题,<h6>定义最小的标题.具有 align属 ...
- Nginx 实现 Rewrite 跳转
文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 上一篇文章对Nginx的Location配置进行了讲解,本篇主要对于Nginx中的Rewrite跳转进行讲解. ...
- struct模块的使用
原理: 将一组简单数据进行打包,转换为bytes格式发送.或者将一组bytes格式数据,进行解析. 接口使用 Struct(fmt) 功能: 生成结构化对象 参数:fmt 定制的数据结构 st.pac ...