`
wangpx
  • 浏览: 198257 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

iframe加载loading...

阅读更多

    <body>   
     <div      id="load" align="center">
<img src="http://sc.cnwebshow.com/upimg/allimg/070707/01294420.gif" />&nbsp;loading...
     </div>                                                      <!-- 首先放一个div,用做loading效果 -->
     <iframe     id="demo"      src="http://www.baidu.com/"     width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0"></iframe>        <!-- src 里面放你想要的网页-->
         <script      type="text/javascript">   
         //<![CDATA[   
     var      a      =      document.getElementById("demo");   
     var      b      =      document.getElementById("load");   
     a.style.display      =      "none";                     //隐藏
     b.style.display      =      "block";                     //显示
     a.onreadystatechange      =      function()      {   
     if      (this.readyState=="complete")      {       //最近才知道的。不然也写不出来。
                                                                 // 解释:一个iframe加载完毕的状态是complete,
                                                                 // 就象xmlhttp里的那个==4一样,这些都是规定的...
     b.innerHTML      =      "load      complete!";    
     b.style.display      =      "none";  
     a.style.display      =      "block";   
     }   
     }   
         //]]>   

         </script>   
     </body>

 

看了人家的代码:
              var state = this.readyState;
            
if (state == "loaded" || state == "interactive" || state == "complete") {
              
this.onreadystatechange = null;
            b.innerHTML      =      "load      complete!";    
             b.style.display      =      "none";  
            a.style.display      =      "block";   
             }
               else
              {
               window.setTimeout(  "回调函数"    , 100);
             }
好象比我的要更加严密。
但我有点不懂。我的函数是这么写的     a.onreadystatechange      =      function()      {}
那么我这个回调函数该怎么写。
看人家的代码:
function on(){
if ( window.onload )
{
alert( "page onload." );
}
else{
window.setTimeout( on, 1000);
}
}
on();
分享到:
评论

相关推荐

    jquery插件:ajax和iframe加载提示效果1.1版

    更新日志2012-05-05: 修复了几个bug: 1,iframe在没有指定宽和高时默认全屏的bug 2,当iframe隐藏时的错误显示...1,不支持多个iframe同时异步加载, 2,不支持自定义加载效果图片 3,ajax不支持指定对象加载效果。

    网页图片延迟加载案例.rar

    这是一款有关网页图片延迟加载的小案例,主要包括了图片随滚动条延迟加载、整个页面loading延迟加载、图片延迟加载、iframe打开页面延迟加载的技术。通过延迟加载技术可以提升网站的性能,有需要的朋友可以下载看看...

    vue-friendly-iframe-一个Vue js组件,用于创建超快速加载,无阻塞的iframe。-Vue.js开发

    vue-friendly-iframe基于Aaron Peter的文章,用于创建动态异步iframe的Vue js组件:http://www.aaronpeters.nl/blog/iframe-loading- vue-friendly-iframe Vue js组件,用于基于以下内容创建动态异步iframe:亚伦·...

    基于JS判断iframe是否加载成功的方法(多种浏览器)

    JS iFrame加载慢怎么解决 在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来。这时,我们就要考虑是否...

    lite-iframe:一种网络组件,可通过延迟加载iframe来增强UX并提供更好的后备UI

    通过延迟加载iframe并提供更好的后备用户界面来增强用户体验的Web组件·· 关于该项目 建于 入门 要启动并运行本地副本,请遵循以下简单步骤。 安装NPM软件包 npm install lite-iframe 在项目根目录中包含lite-...

    loading-attribute-polyfill:快速轻巧的无依赖香草JavaScript polyfill,用于本机延迟加载真棒loading ='lazy'-attribute

    loading =“ lazy”属性polyfill 快速,轻量的香草JavaScript polyfill用于本机延迟加载,这意味着在元素进入视口之前立即进行加载的行为。 提供优美的降级效果,并且-不仅限于此-SEO友好。 使用srcset和picture处理...

    jekyll-loading-lazy::female_sign:‍:female_sign_selector:自动将loading =“ lazy”添加到和标签。 无需JavaScript即可将图片懒惰地加载到您的网站上

    loading="lazy"导致图像和iframe延迟加载而没有任何JavaScript。 正在增长。 如果浏览器不支持loading属性,则它将像通常那样加载资源。 :white_medium_star: 如果您喜欢,请为其或。 :beating_heart: 安装 将...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

    ExtAspNet_v2.3.2_dll

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

    lazyframe:for用于延迟加载iframe的无依赖库

    懒帧 延迟加载iframe的无依赖库。为什么? 因为嵌入的内容需要时间才能加载。 YouTube – 11个请求≈580kb Google地图-52个请求≈580kb Vimeo – 8个请求≈145kb Lazyframe为嵌入式内容创建一个响应式占位符,并在...

    VUE页面中加载外部HTML的示例代码

    不同以往的IFRAME标签,那种方式比较Low,另外有其他的一些BUG。 本文思路是把HTML请求以来,以v-html的形式加载到页面内部。注册全局组件【v-html-panel】 1.HtmlPanel.vue文件 &lt;mu size=40 v-if=loading/&gt; ...

    lazy-loading-responsive-images:WordPress插件,用于延迟加载图像。 适用于自适应图像并使用lazysizes

    懒加载器贡献者: FlorianBrinkmann,MarcDK 捐赠链接: : 标签: lazysizes,延迟加载,性能,图像至少需要: 4.9.8 经测试至: 5.7 稳定标签: 7.2.2 需要PHP: 7.0描述延迟加载插件,支持图像,iFrame,视频和...

    plain-overlay:覆盖页面、元素或 iframe-windows 的可定制覆盖的简单库

    iframe&gt; ) 另一个窗口中的元素用法将 PlainOverlay 加载到您的网页中。 &lt; script src =" plain-overlay.min.js " &gt; &lt;/ script &gt; 这是最简单的情况: PlainOverlay . show ( ) ; // Static method ...

    xheditor-1.1.14

    说明:控制弹出窗口是否显示上方的标题栏,默认为显示,若需要显示一个更定制个性化的iframe窗口,可通过此参数隐藏上方的标题栏 upBtnText:上传按钮的文字 参数值:任意字符串,默认值:“上传” 备注:1.0.0 beta2...

    web弹出层组件MyPopup

    MyPopup不仅模拟了alert、confirm、propmt等等控件,还扩展出tip(小提示框)、loading(加载中)、iframe(框架)、open(常规弹窗)、blank(空白弹出层)等等常用的弹出层。让我最满意的是tip()方法,它依附于...

    artDialog_Demo

    1、 url参数加载外部页面的时候显示loading动画 2、 预加载皮肤背景图片 3、 优化拖动 v2.0.6 1、 解决页面载入即弹出的情况造成水平对齐不正常的BUG(主要是dom ready事件 绑定) 2、 增加parent参数,支持...

    KODExplorer 芒果云-资源管理器

    - iframe 打开url 优化。解决canvas问题 - 文件编辑器,载入loading去掉 - 删除错误时,或上传错误时也刷新目录。删除提示颜色错误 - 对话框右键 点击右键菜单隐藏修复 - 手机端 touch =双击 - 文件列表 ...

    400个DreamWeaver插件

    mxp/预先加载页面,有些象flash前面的loading效果 mxp/从新加载Drreamweaver的各项插件,对于插件开发者来说就不用重复的启动关闭Dreamweaver了 mxp/让你的页面变的讨厌透顶,建议不要使用 mxp/轻松的在WEB页面中...

    《程序天下:JavaScript实例自学手册》光盘源码

    22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开无效页面 22.10 用JavaScript调用Google AdSense 22.11 Ajax效果:可拖拽的表格 22.12 JavaScript调用Web Service ...

    程序天下:JavaScript实例自学手册

    22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开无效页面 22.10 用JavaScript调用Google AdSense 22.11 Ajax效果:可拖拽的表格 22.12 JavaScript调用Web Service ...

Global site tag (gtag.js) - Google Analytics