<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效果的更多相关文章

  1. 使用pjax时点击浏览器刷新按钮仅加载内容页的解决办法

    pjax可以实现ajax的局部刷新功能,同时能改变地址栏的URL,因此支持浏览器的后退和前进功能. 但是,在使用中,若没有正确使用,仍然会出现一些问题. 比如,我们在使用pjax后,能够在不加载整个页 ...

  2. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...

  3. vue实现ajax滚动下拉加载,同时具有loading效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. js实现所有异步请求全部加载完毕后,loading效果消失

    在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了ajax,在这种情况下,我们要实现数据没来之前出现我们炫酷的loading效果,而且要等到所有的ajax都请求完毕后,才让我们的loadi ...

  5. vue中iframe加载慢,给它加loading效果

    js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> < ...

  6. jquery easyui tab加载内容的几种方法

    转:http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页 ...

  7. iframe加载方案及性能

    普通方法加载iframe 在onload之后加载iframe setTimeout来加载iframe 友好型iframe加载 转载地址:翻译文章-iframe异步加载技术及性能 英文原文:Iframe ...

  8. paip.gui控件tabs控件加载内容的原理以及easyui最佳实现

    paip.gui控件tabs控件加载内容的原理以及easyui最佳实现 //////////////tabs控件的加载 同form窗体一样,俩个方式 两个方式:一个是url,简单的文本可以使用这个,不 ...

  9. 在ASP.NET中动态加载内容(用户控件和模板)

    在ASP.NET中动态加载内容(用户控件和模板) 要点: 1. 使用Page.ParseControl 2. 使用base.LoadControl 第一部分:加载模板 下 面是一个模板“<tab ...

随机推荐

  1. 登录成功后如何利用cookie保持登录状态

    Cookie是一种服务器发送给浏览器的一组数据,用于浏览器跟踪用户,并访问服务器时保持登录状态等功能. 通常用户登录的时候,服务器根据用户名和密码在服务器数据库中校验该用户是否正确,校验正确后则可以根 ...

  2. pytest_用例运行级别_函数级

    '''  函数级(setup_function/teardown_function只对函数用例生 效(不在类中)在类中是用该方法不生效 ''' import pytest def setup_mod ...

  3. error MSB8008: 指定的平台工具集(v110)未安装或无效

    转自VC错误:http://www.vcerror.com/?p=318 问题描述: 平台工具集(v110)是vs2012下用的,你是用vs2010打开工程,它默认是用v100, 所以这个工程可能用v ...

  4. Git SSH连接方式配置

    如果使用ssh的方式管理,需要配置ssh key. 1.打开git bash命令窗口 2.生成ssh key ssh-keygen -t rsa -b 4096 -C "your_email ...

  5. C++继承中的构造和析构

    1,构造:对象在创建的后所要做的一系列初始化的工作: 析构:对象在摧毁之前所要做的一系列清理工作: 2,思考: 1,子类中如何初始化父类成员? 1,对于继承而言,子类可以获得父类的代码,可以获得父类中 ...

  6. vue学习 ---- 使用vue-router 进行跳转

    前提说明,在学习vue的时候,尽量的以官网的为主,而且框架本身与官方文档都是在不断迭代更新的. 在vue的框架中,目前都是使用vue-router 来进行页面跳转的,而不是<a>.先贴一个 ...

  7. python面试题之迭代器和生成器的区别

    1 迭代器是一个更抽象的概念,任何对象,如果它的类有next方法和iter方法返回自己本身.对于string.list.dict.tuple等这类容器对象,使用for循环遍历是很方便的.在后台for语 ...

  8. jQuery对于demo元素的上移、下移、删除操作等实现

    今天给大家分享一个实用的jQuery技能:dom元素的操作:我们经常会去获取dom元素去实现交互效果,以及数据的操作. 首先复习一下jQuery DOM 元素方法: .get() 获得由选择器指定的D ...

  9. Centos,tomcat

    1.下载tomcat9.0,解压,配置 wget https://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-9/v9.0.21/bin/apa ...

  10. html input标签 要求只能输入纯数字

    在input标签添加以下代码即可 oninput = "value=value.replace(/[^\d]/g,'')" <input type="text&qu ...