慢工出细活 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 ...
随机推荐
- 2015全国大学生数学建模B题浅谈
题目请自主上网获取. 分析下思路.第一问,不同时空的出租车的“供求匹配”程度. 也就是说要选取的数据要有时间和地理两个维度.实体对象是出租车.关键的问题就是地点怎么选? 选择的城市具备如下经济较发达, ...
- lvs 进阶 第二章
linux virtual server 一 . lvs lvs 对数据进行四层转发,根据目标地址和目标端口对请求数据进行转发. lvs 包含ipvsadm 和ipvs: ipvsadm :用户空间的 ...
- Python socket网络编程(通信介绍)
socket通信介绍 通信介绍(一) 1.所有网络协议的基础就是:socket 2.socket对TCP与UDP协议封装,让用户进行简单操作. 3.socket只做两件事:发 send,收 rec ...
- iOS开发 -------- 图片浏览器初步
一 示例代码 // // RootViewController.m // 图片浏览器初步 // // Created by lovestarfish on 15/11/1. // Copyright ...
- Learning-Python【27】：异常处理
一.错误与异常 程序中难免会出现错误,而错误分为两种 1.语法错误:这种错误,根本过不了 Python 解释器的语法检测,必须在程序执行前就改正 2.逻辑错误:比如用户输入的不合适等一系列错误 那什么 ...
- Nginx 配置负载均衡
nginx负载均衡配置,主要是proxy_pass,upstream的使用. 注意问题,多台机器间session的共享问题. 不用session,用户cookie.或者用redis替代session. ...
- CentOS7设置阿里镜像
1. 备份原来的yum源 sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2.设置ali ...
- 基于虹软的Android的人脸识别SDK使用测试
现在有很多人脸识别的技术我们可以拿来使用:但是个人认为还是离线端的SDK比较实用:所以个人一直在搜集人脸识别的SDK:原来使用开源的OpenCV:最近有个好友推荐虹软的ArcFace, 闲来无事就下来 ...
- Git commit/pull/push的操作步骤
1.操作步骤需要严格执行如下顺序:commit->pull->push 2.commit:将代码提交到本地仓库. 3.pull:将远程仓库代码同步到本地仓库.如遇冲突,解决冲突,重复com ...
- vs2015 ncnn
1.vs2015编译器编译protobuf (VS2015 x64本机工具命令) 下载源码:https://github.com/google/protobuf/archive/v3.4.0.zi ...