实例可以直接运行查看效果。很方便快捷

  1. <html>
  2. <head>
  3. <meta http-equiv="content-Type" content="text/html;charset=gb2312">
  4. <style type="text/css">
  5. <!--
  6. *{margin:0;padding:0;}
  7. .ifr_div{width:600px;height:600px; position:relative;}
  8. .ifr_div img{ vertical-align:middle;}
  9. .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;}
  10. .proccess b{vertical-align:middle;background:url(http://ok22.org/upload/images/20110902143538381.gif) no-repeat 0 center;padding-left:35px;display:inline-block;}
  11. -->
  12. </style>
  13. </head>
  14. <body>
  15. <div class="ifr_div">
  16. <div class="proccess" id="loading"><b>正在加载中。。。</b></div>
  17. <iframe id="sfa" name="sfa" frameborder="0" scrolling="auto" height="600" width="600"></iframe>
  18. </div>
  19. <script language="JavaScript">
  20. var iframe = document.getElementById("sfa");
  21. iframe.src = "http://www.ok22.org";
  22. if (iframe.attachEvent){
  23. iframe.attachEvent("onload", function(){
  24. document.getElementById("loading").style.display="none";
  25. });
  26. } else {  www.2cto.com
  27. iframe.onload = function(){
  28. document.getElementById("loading").style.display="none";
  29. };
  30. }
  31. </script>
  32. </body>
  33. </html>

慢工出细活 JS 等待加载效果的更多相关文章

  1. js图片加载效果（延迟加载+瀑布流加载）

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  2. [js开源组件开发]loading加载效果

    loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...

  3. js 实现加载百分比效果

    效果: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. 使用 SVG 实现一个漂亮的页面预加载效果

    今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...

  5. 转:web前端面试题合集 (Javascript相关)（js异步加载详解）

    1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...

  6. js文件加载优化

    在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. ...

  7. 再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6

    Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. Javascript社区做了很多努力,在现有的运行环境中,实现” ...

  8. 如何在小程序实现图片lazy-load懒加载效果

    自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...

  9. js玩命加载……

    在请求数据加载的过程中,经常需要显示请求等待,写了一个简单的请求等待—- html代码如下 <!--页面载入显示--> <div id="dataLoad" st ...

随机推荐

  1. 通过 UC2000-VG-32G设备呼叫不进号问题排查

    1.登陆设备管理页面: 呼叫发起时,呼叫状态显示振铃,但是不进号. 2.查看设备cdr. 3.得出结论:NO CARRIER 由于号码频繁呼叫次数太多运营商对其死锁.

  2. pandas之时间序列

    Pandas中提供了许多用来处理时间格式文本的方法,包括按不同方法生成一个时间序列,修改时间的格式,重采样等等. 按不同的方法生成时间序列 In [7]: import pandas as pd # ...

  3. Base64 空格，加号问题

    缘由: 在一个项目中,app请求tcpdump日志与记录的日志内容不一致 请求%2B 识别成 + 请求 + 识别成 空格 这个在base64解密的时候会出现异常,base64需要的是加号,而不是空格 ...

  4. Lintcode376-Binary Tree Path Sum-Easy

    376. Binary Tree Path Sum Given a binary tree, find all paths that sum of the nodes in the path equa ...

  5. Query the tables and index which will caus rebuild index fail

    On MSSQL server database, while rebuild index failed, we can use the follow sql statement to see if ...

  6. _pet

    可以控制各职业召唤物的属性.用于增强BB `comment` 备注 `classIndex` 职业序号 `DmgAddPct` 宠物伤害倍率 `SpAddPct` 法术伤害 `HpAddPct`血量倍 ...

  7. webpack不同版本导致的promise不存在问题

    之前采用的axios是基于promise的,但是IE并没有内置promise,所以要提前install一个promise插件: npm install promise import Promise f ...

  8. 『TensorFlow』梯度优化相关

    tf.trainable_variables可以得到整个模型中所有trainable=True的Variable,也是自由处理梯度的基础 基础梯度操作方法: tf.gradients 用来计算导数.该 ...

  9. js获取当前时间：封装js的日期时间

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  10. css绘制内扣圆角

    纯静态的一种效果绘制,避免使用图标浪费内存.效果如下 废话不多说,代码如下: <!DOCTYPE html> <html lang="en"> <he ...