<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. C# JS 前后端互传数据

    ---恢复内容开始--- 后端: public void ProcessRequest(HttpContext context) { context.Response.ContentType = &q ...

  2. 记录MNIST实现与理解

    之前半个月的时间几乎都在看理论书籍,最近两天开始撸代码,一个跟Hello World同级别的教程例子就出来了,那就是MNIST.实现代码应该很多地方都有: #!/usr/bin/env python ...

  3. pandas相关操作

    import pandas as pd import numpy as np ''' 一.创建df 1.定义df :传递字典 1.1每一列的名称作为键 每个键都有一个数组作为值[key:数组] 1.2 ...

  4. 48-python基础-python3-字符串-常用字符串方法(六)-strip()-rstrip()-lstrip()

    7-用 strip().rstrip()和 lstrip()删除空白字符 strip()字符串方法将返回一个新的字符串,它的开头或末尾都没有空白字符. lstrip()和 rstrip()方法将相应删 ...

  5. vue证明题一,vue全家桶的构成

    简单说下vue的构成,当然是简单为主,网上这东西满天飞,简单说几句就ok 1.vue是什么 vue读作view,是一种js框架.只关注于视图层,操作内容包括js,html,css 2.vue全家桶是什 ...

  6. SpringBoot整合Druid,密码加密

    1.application.yml配置 spring: datasource: url: jdbc:mysql://127.0.0.1:3306/jby?serverTimezone=UTC& ...

  7. mocha.js

    mocha 如果你听说过“测试驱动开发”(TDD:Test-Driven Development),单元测试就不陌生. 单元测试是用来对一个模块.一个函数或者一个类来进行正确性检验的测试工作. 比如对 ...

  8. Table 'jiang.hibernate_sequence' doesn't exist

    spring+struts2+hibernate 运行报错 Table 'jiang.hibernate_sequence' doesn't exist 解决方法 一. 在hibernate.cfg. ...

  9. MAS(转)

    1.为什么要使用微服务? 要说为什么要使用微服务,我们要先说下传统的企业架构模式-垂直架构/单块架构模式,简单点说:我们一般将系统分为三层架构,但是这是逻辑上的三层,而非物理上的三层,这就意味着经过编 ...

  10. C常量

    C 常量 常量是固定值,在程序执行期间不会改变.这些固定的值,又叫做字面量. 常量可以是任何的基本数据类型,比如整数常量.浮点常量.字符常量,或字符串字面值,也有枚举常量. 常量就像是常规的变量,只不 ...