慢工出细活 JS 等待加载效果
实例可以直接运行查看效果。很方便快捷
- <html>
- <head>
- <meta http-equiv="content-Type" content="text/html;charset=gb2312">
- <style type="text/css">
- <!--
- *{margin:0;padding:0;}
- .ifr_div{width:600px;height:600px; position:relative;}
- .ifr_div img{ vertical-align:middle;}
- .proccess{border:0px solid;border-color:#009900;height:600px;line-height:600px;width:600px;text-align:center;background:#eee;margin:0;position:absolute;top:0;left:0;}
- .proccess b{vertical-align:middle;background:url(http://ok22.org/upload/images/20110902143538381.gif) no-repeat 0 center;padding-left:35px;display:inline-block;}
- -->
- </style>
- </head>
- <body>
- <div class="ifr_div">
- <div class="proccess" id="loading"><b>正在加载中。。。</b></div>
- <iframe id="sfa" name="sfa" frameborder="0" scrolling="auto" height="600" width="600"></iframe>
- </div>
- <script language="JavaScript">
- var iframe = document.getElementById("sfa");
- iframe.src = "http://www.ok22.org";
- if (iframe.attachEvent){
- iframe.attachEvent("onload", function(){
- document.getElementById("loading").style.display="none";
- });
- } else { www.2cto.com
- iframe.onload = function(){
- document.getElementById("loading").style.display="none";
- };
- }
- </script>
- </body>
- </html>
慢工出细活 JS 等待加载效果的更多相关文章
- js图片加载效果（延迟加载+瀑布流加载）
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
- [js开源组件开发]loading加载效果
loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...
- js 实现加载百分比效果
效果: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 使用 SVG 实现一个漂亮的页面预加载效果
今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...
- 转:web前端面试题合集 (Javascript相关)（js异步加载详解）
1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...
- js文件加载优化
在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. ...
- 再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6
Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. Javascript社区做了很多努力,在现有的运行环境中,实现” ...
- 如何在小程序实现图片lazy-load懒加载效果
自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...
- js玩命加载……
在请求数据加载的过程中,经常需要显示请求等待,写了一个简单的请求等待—- html代码如下 <!--页面载入显示--> <div id="dataLoad" st ...
随机推荐
- No Directionality widget found
The problem is not that you have not wrapped your widgets into MaterialApp. As the documentation say ...
- PHP 订单延时处理：延迟队列（未鉴定）
PHP 订单延时处理:延迟队列: https://github.com/chenlinzhong/php-delayqueue
- P4027 [NOI2007]货币兑换（斜率优化dp+cdq分治）
P4027 [NOI2007]货币兑换 显然,如果某一天要买券,一定是把钱全部花掉.否则不是最优(攒着干啥) 我们设$f[j]$为第$j$天时用户手上最多有多少钱 设$w$为花完钱买到的$B$券数 $ ...
- Python爬虫(四)——开封市58同城数据模型训练与检测
前文参考: Python爬虫(一)——开封市58同城租房信息 Python爬虫(二)——对开封市58同城出租房数据进行分析 Python爬虫(三)——对豆瓣图书各模块评论数与评分图形化分析 数据的构建 ...
- Github 最简单的认证方式 - Access Token
Github 本身提供了多种认证方式,所有开发人员可以各取所需. SSH,这是最原始的方式,如果使用git bash只要按照官方文档一步一步配置就好了 小心坑:SSH有可能需要配置代理,否则无法解析服 ...
- 6、zabbix使用进阶(02)
zabbix知识点: zabbix可视化 自定义图形(graphs) 屏幕(screen) 宏(macros) 用户参数(User parameters):用户自定义items key的方式来实现自 ...
- Spring-AOP环绕监听出错
Exception in thread "main" org.springframework.aop.AopInvocationException: Null return val ...
- 5_bash
bash及其特性:shell:外壳.用户直接接入计算机的时候所使用的外壳程序linux允许一个用户账户登录多次,而这多次登录的每一个打开的shell都是独立的互不相干的shell,它们是三个进程,每一 ...
- css技巧小计
今天又学到两招,一招是把大框写相对定位,然后小框写绝对定位,运用top和left,想去哪里去哪里 另一招是边框渐变色,微信小程序,边框写渐变我没成功,然后大佬支招写一个大框,相对定位,然后设背景渐变色 ...
- python 自定义异常
python2 #coding=utf- class CustomError(Exception): def __init__(self,ErrorInfo): self.er ...