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 ...
随机推荐
- Locust 源码理解与分析
前言 相信很多小伙伴会选择Locust作为压测工具辅助测试,本文从Locust源码开始分析它的优劣,结论在最后,最终我还是选择了Jmeter 主要分析了Locust源码的两个文件:main.py 和 ...
- JavaScript-Tool-截取头像:ShearPhoto
ylbtech-JavaScript-Tool-截取头像:ShearPhoto ShearPhoto 2.0 发布,支持HTML5本地截取头像,支持美图秀秀特效,支持几十M数码相片压缩截取 1.返回顶 ...
- python 3.x上安裝web.py
python 3.x上安裝web.py 查询之后,安装时使用pip3 install web.py==0.40.dev0 最終可以运行 app.py import weburls=( '/',' ...
- Linux查看硬件配置
1.查看机器所有硬件信息:dmidecode |moredmesg |more 这2个命令出来的信息都非常多,所以建议后面使用"|more"便于查看 2.查看CPU信息 方法一: ...
- 神他么奇怪NoClassDefFoundError
javaweb 项目,部署在Tomcat服务器 十分奇葩的问题 之前一直好好的,今天突然就给报错.代码没动过.真是奇葩.创建User对象报NoClassDefFoundError, User类是一个普 ...
- javaIO流(一)--File类的基本使用
一.File文件操作类 在java语言中提供有对于文件操作系统的支持,这个支持就在java.io.File类中进行了定义,也就是说在整个java.io包中File类是唯一一个与文件本身操作有关的类(创 ...
- 重磅!挑战Oracle,华为将开源 GaussDB 数据库
来源:中关村在线,https://dwz.cn/nHNSOTeN 有消息称在正在进行的鲲鹏计算产业论坛上,华为宣布将开源其GaussDB数据库. GaussDB数据库是今年5月15日华为公布的分布式数 ...
- C++中的智能指针类模板
1,智能指针本质上是一个对象,这个对象可以像原生的指针一样使用,因为智能指 针相关的类通过重载的技术将指针相关的操作符都进行了重载,所以智能指针对象可以像原生指针一样操作,今天学习智能指针类模板,通过 ...
- luoguP1315 观光公交 题解(NOIP2011)(贪心)
P1315 观光公交 题目 #include<iostream> #include<cstdlib> #include<cstdio> #include<cm ...
- springCloud的使用08-----服务链路追踪(sleuth+zipkin)
sleuth主要功能是在分布式系统中提供追踪解决方案,并且兼容支持了zipkin(提供了链路追踪的可视化功能) zipkin原理:在服务调用的请求和响应中加入ID,表明上下游请求的关系. 利用这些信息 ...