慢工出细活 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 ...
随机推荐
- Java连接数据库 #05# SQL与代码分离
索引 读取html中的SQL语句 缺陷总结 在Java连接数据库 #04#里大概是这样放sql语句的: package org.sample.shop.db.queryrunner; import o ...
- K8S学习笔记之kubernetes 日志架构
0x00 概述 应用程序和系统日志可以帮助我们了解集群内部的运行情况,日志对于我们调试问题和监视集群情况也是非常有用的.而且大部分的应用都会有日志记录,对于传统的应用大部分都会写入到本地的日志文件之中 ...
- P3195 [HNOI2008]玩具装箱TOY（斜率优化dp）
P3195 [HNOI2008]玩具装箱TOY 设前缀和为$s[i]$ 那么显然可以得出方程 $f[i]=f[j]+(s[i]-s[j]+i-j-L-1)^{2}$ 换下顺序 $f[i]=f[j]+( ...
- DataFrame数据转为list，再逐行写入Excel
首先使用np.array()函数把DataFrame转化为np.ndarray(), 再利用tolist()函数把np.ndarray()转为list, 示例代码如下: # -*- coding:ut ...
- Java的集合框架（第一次小结）
知识点一.集合框架Java集合框架提供了一套性能优良.使用方便的接口和类,它们位于java.util包中二.集合框架的结构Collection:集合接口Map:键值对接口List:有序不唯一列表接口S ...
- 再谈git和github-深入理解
git中的 objects 和 refs 是什么? 目录objects是仓库的 "对象库" , 是包含 代码, 提交, 日志, 信息, 索引等信息的关键所在 refs是一些 sha ...
- jQuery页面替换+php代码实现搜索后分页
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- html复习小结
border-radius可以设置百分比 百分之五十是圆形 class="class1 class2" 无序列表 <ul><li></li>&l ...
- 解决依赖冲突：maven-enforcer-plugin插件
我们会经常碰到这样的问题,在pom中引入了一个jar,里面默认依赖了其他的jar包.jar包一多的时候,我们很难确认哪些jar是我们需要的,哪些jar是冲突的.此时会出现很多莫名其妙的问题,什么类找不 ...
- 用docker-compose部署postgres+ postgis
20190411更新.之前写的太啰嗦,也不删了,重新来.小坑还是有的 psql 命令行客户端 因为postgres用docker镜像安装,所以host不需要安装pg,只需要安装客户端 sudo apt ...