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

  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. Spring Data Solr入门

    如何将Solr的应用集成到Spring中? SpringDataSolr就是为了方便Solr的开发所研制的一个框架,其底层是对SolrJ的封装. SpringDataSolr入门小Demo 首先目录结 ...

  2. 从路由器镜像中提取uImage头信息

    uImage header为64字节,文件头为27 05 19 56 hexdump -C a.bin | grep "27 05 19 56" 或者 hd aa.bin | gr ...

  3. Xcode8兼容iOS7以及低版本Xcode调试高版本iOS系统

    我们使用Xcode8新建的工程,默认支持的最低系统是iOS8,我们可以手动更改版本到7.0,但是不支持真机调试. 现在的项目一般都要兼容iOS7系统,同时也要兼容iOS10,在Xcode8上面,默认情 ...

  4. P3601 签到题

    思路 注意到求的qiandao(x)就是\(x-\phi(x)\) 但是\(l,r\le 10^{12}\),所以不能直接杜教筛 但是\(r-l\le 10^{6}\),所以可以先筛出1e6(\(\s ...

  5. memcpy的函数

    网新恒天2014校园招聘笔试编程题 已知memcpy的函数为: void* memcpy(void *dest , const void* src , size_t count)其中dest是目的指针 ...

  6. mongodb+nodejs

    不能只看mongodb官网文档https://docs.mongodb.com/manual/reference/method/db.collection.findOne/,都是同步接口 要看node ...

  7. vue form表单验证

    <el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option ...

  8. guxh的python笔记七：抽象基类

    1,鸭子类型和白鹅类型 1.1,白鹅类型 白鹅类型对接口有明确定义,比如不可变序列(Sequence),需要实现__contains__,__iter__,__len__,__getitem__,__ ...

  9. LeetCode--015--三元之和(java)

    给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 注意:答案中不可以包含重复的三元组. ...

  10. zend cache使用

    require_once 'Zend/Cache.php';//引用文件$frontendOptions = array( 'lifeTime' => 60, // cache lifetime ...