<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. three dots in git

    What are the differences between double-dot “..” and triple-dot “…” in Git commit ranges? Using Comm ...

  2. JAVA中STL使用

    Vector:和c++的vector使用方法类似. Vector<Integer> vec=new Vector<> (); ArrayList:Java.util.Array ...

  3. 资源-DotNet-站点:DotNet 站点列表

    ylbtech-资源-DotNet-站点:DotNet 站点列表 1.ASP.NET Web返回顶部 1.1.问卷星 https://www.wjx.cn/sample/service.aspx 1. ...

  4. 模拟用户登录含注册——python第8天

    print('欢迎登录尚雅梦想python学习系统'.center(30)) print('******' * 8) flag = True while flag: order = input(''' ...

  5. fiddler如何抓取https接口

    1.Fiddler工作原理:    Fiddler 是以代理 web 服务器的形式工作的,它使用代理地址:127.0.0.1端口:8888. 当 Fiddler 退出的时候它会自动注销,这样就不会影响 ...

  6. java的实用类

    1)   Random类 用于生成随机数字,所有生成的数字,都是等概率的. nextInt():生成的值介于int的所有取值范围(-231 ~ 231-1) nextInt(int value):生成 ...

  7. 学习php的步骤是什么?

    PHP应该学什么,如何学好PHP (注:原文来自传智播客) 一些共性问题,大致是: 1. 应该怎样学习PHP,学习的顺序是怎样的? 2. PHP学好后,可以做什么事情? 3. 听得懂课,但是一旦自己独 ...

  8. this.$router.push相关的vue-router的导航方法

    this.$router.push相关的vue-router的导航方法:https://blog.csdn.net/zeroyulong/article/details/80312750

  9. python面试题之什么是Tkinter ?

    TKinter是一款很知名的Python库,用它我们可以制作图形用户界面.其支持不同的GUI工具和窗口构件,比如按钮.标签.文本框等等.这些工具和构件均有不同的属性,比如维度.颜色.字体等. > ...

  10. 修改默认runlevel

    CentOS直接修改文件  /etc/inittab 就好了 # Default runlevel. The runlevels used are: # - halt (Do NOT set init ...