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 ...
随机推荐
- Scrapy模拟登陆豆瓣抓取数据
scrapy startproject douban 其中douban是我们的项目名称 2创建爬虫文件 进入到douban 然后创建爬虫文件 scrapy genspider dou douban. ...
- php使用curl抓取网页自动跳转问题处理
问题分析: 请求抓取http://go.com数据: function curlGet($url) { $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, ...
- PHP curl get post请求
POST请求: public function postUrl($url, $postData = false, $header = false) { $ch = curl_init($url); c ...
- rabbitmq for C#的异步消息确认机制
代码: using (var conn = RabbitmqHelper.GetConnection()) { using (var channel = conn.CreateModel()) { / ...
- HTML最全标签
一.HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(DTD). 标签:a 说明:标明超链接的起始或目的位置. 标签:acronym 说明:标明缩写词. ...
- laravel artisan工具的使用
Artisan是laravel中自带的命令行工具的名称(一个php文件,放在laravel框架的根目录,因此命令的使用都是在根目录下的). 它提供了一些对应用开发帮助的命令,可以使用list命令列出所 ...
- 正则search与match的区别
import re # #1.search和match的区别 # pattern = re.compile(r'\d+') # #match从头开始匹配 # m = pattern.match('on ...
- 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 ...
- Spring 常犯的十大错误,打死都不要犯!
原文:https://www.toptal.com/spring/top-10-most-common-spring-framework-mistakes 作者:Toni Kukurin,译者:万想 ...
- 恐怖的奴隶主(bob)
题目描述 小L热衷于undercards. 在undercards中,有四个格子.每个格子要么是空的,要么住着一只BigBob. 每个BigBob有一个不超过k的血量:血量减到0视为死亡.那个格子随即 ...