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 ...
随机推荐
- 初步认识pug
一.初步认识pug 1.所谓的pug就是我们之前说的jade,也就是一种通过缩进的方式来编写代码的过程,在编译的过程中,我们不需要考虑标签是否闭合的问题.此外,用这种编译方式,加快了我们写代码的速度, ...
- EasyUI 中的双击某行 并赋值给input事件
项目是由mvc+easyUI开发,双击事件在下边.有注释写着呢 function DataList(supCode) { myDatagrid2.datagridId = "GridView ...
- jmeter添加自定义扩展函数之if判断
1,打开eclipse,新建maven工程,在pom中引用jmeter核心jar包,具体请看---https://www.cnblogs.com/guanyf/p/10863033.html---,这 ...
- Windwos 08R2_DNS+AD安装图文
目录 目录 前言 软件环境 DNS域名服务器 配置DNS服务器 AD活动目录 配置AD域 前言 Windows 2008 R2平台下搭建AD(Active Directory)和DNS(Domain ...
- spring boot 尚桂谷学习笔记10 数据访问02 mybatis
数据访问 mybatis 创建一个 springboot 工程,模块选择 sql 中 mysql(数据驱动), jdbc(自动配置数据源), mybatis Web模块中选择 web pom 引入: ...
- PHP 实现小偷程序
为什么使用“小偷程序”? 远程抓取文章资讯或商品信息是很多企业要求程序员实现的功能,也就是俗说的小偷程序.其最主要的优点是:解决了公司网编繁重的工作,大大提高了效率.只需要一运行就能快速的抓取别人网站 ...
- webstorm的下载、破解、与汉化
其实很简单的事情,都被我弄复杂了倒腾了很久,特做个记录. 说明前提,版本为 webstorm 2018.1.4 一.下载webstorom 下载地址:当然去官网啊 https://www.jetbr ...
- [Fw]初探linux中断系统(1)
1. 重要接口 LDD上说,“内核维护了一个中断信号线的注册表,该注册表类似于I/O端口的注册表.模块在使用中断前要先请求一个中断通道(或者中断请求IRQ),然后在使用后释放该通道.” 撇开系统如何遍 ...
- 发送xml数据
- emqtt 分布集群及节点桥接搭建
目录 分布集群 emq@s1.emqtt.io 节点设置 emq@s2.emqtt.io 节点设置 节点加入集群 节点退出集群 节点发现与自动集群 manual 手动创建集群 基于 static 节点 ...