<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. Scrapy模拟登陆豆瓣抓取数据

    scrapy  startproject douban 其中douban是我们的项目名称 2创建爬虫文件 进入到douban 然后创建爬虫文件 scrapy genspider dou douban. ...

  2. php使用curl抓取网页自动跳转问题处理

    问题分析: 请求抓取http://go.com数据: function curlGet($url) { $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, ...

  3. PHP curl get post请求

    POST请求: public function postUrl($url, $postData = false, $header = false) { $ch = curl_init($url); c ...

  4. rabbitmq for C#的异步消息确认机制

    代码: using (var conn = RabbitmqHelper.GetConnection()) { using (var channel = conn.CreateModel()) { / ...

  5. HTML最全标签

    一.HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(DTD).   标签:a 说明:标明超链接的起始或目的位置.   标签:acronym 说明:标明缩写词.   ...

  6. laravel artisan工具的使用

    Artisan是laravel中自带的命令行工具的名称(一个php文件,放在laravel框架的根目录,因此命令的使用都是在根目录下的). 它提供了一些对应用开发帮助的命令,可以使用list命令列出所 ...

  7. 正则search与match的区别

    import re # #1.search和match的区别 # pattern = re.compile(r'\d+') # #match从头开始匹配 # m = pattern.match('on ...

  8. Linux安装Apache报错:Cannot find a valid baseurl for repo: base/7/x86_64解决方案

    最近使用CentOS7学习,安装安装Apache时候,使用yum安装Apache报错:本文适合CentOS7和RHEL7 # yum install httpd 出现:cannot find a va ...

  9. Spring 常犯的十大错误,打死都不要犯!

    原文:https://www.toptal.com/spring/top-10-most-common-spring-framework-mistakes 作者:Toni Kukurin,译者:万想 ...

  10. 恐怖的奴隶主(bob)

    题目描述 小L热衷于undercards. 在undercards中,有四个格子.每个格子要么是空的,要么住着一只BigBob. 每个BigBob有一个不超过k的血量:血量减到0视为死亡.那个格子随即 ...