<body>
<div id="load" align="center">
<img src="http://sc.cnwebshow.com/upimg/allimg/070707/01294420.gif" /> 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();
分享到:
相关推荐
更新日志2012-05-05: 修复了几个bug: 1,iframe在没有指定宽和高时默认全屏的bug 2,当iframe隐藏时的错误显示...1,不支持多个iframe同时异步加载, 2,不支持自定义加载效果图片 3,ajax不支持指定对象加载效果。
这是一款有关网页图片延迟加载的小案例,主要包括了图片随滚动条延迟加载、整个页面loading延迟加载、图片延迟加载、iframe打开页面延迟加载的技术。通过延迟加载技术可以提升网站的性能,有需要的朋友可以下载看看...
vue-friendly-iframe基于Aaron Peter的文章,用于创建动态异步iframe的Vue js组件:http://www.aaronpeters.nl/blog/iframe-loading- vue-friendly-iframe Vue js组件,用于基于以下内容创建动态异步iframe:亚伦·...
JS iFrame加载慢怎么解决 在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来。这时,我们就要考虑是否...
通过延迟加载iframe并提供更好的后备用户界面来增强用户体验的Web组件·· 关于该项目 建于 入门 要启动并运行本地副本,请遵循以下简单步骤。 安装NPM软件包 npm install lite-iframe 在项目根目录中包含lite-...
loading =“ lazy”属性polyfill 快速,轻量的香草JavaScript polyfill用于本机延迟加载,这意味着在元素进入视口之前立即进行加载的行为。 提供优美的降级效果,并且-不仅限于此-SEO友好。 使用srcset和picture处理...
loading="lazy"导致图像和iframe延迟加载而没有任何JavaScript。 正在增长。 如果浏览器不支持loading属性,则它将像通常那样加载资源。 :white_medium_star: 如果您喜欢,请为其或。 :beating_heart: 安装 将...
-修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...
-修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...
懒帧 延迟加载iframe的无依赖库。为什么? 因为嵌入的内容需要时间才能加载。 YouTube – 11个请求≈580kb Google地图-52个请求≈580kb Vimeo – 8个请求≈145kb Lazyframe为嵌入式内容创建一个响应式占位符,并在...
不同以往的IFRAME标签,那种方式比较Low,另外有其他的一些BUG。 本文思路是把HTML请求以来,以v-html的形式加载到页面内部。注册全局组件【v-html-panel】 1.HtmlPanel.vue文件 <mu size=40 v-if=loading/> ...
懒加载器贡献者: FlorianBrinkmann,MarcDK 捐赠链接: : 标签: lazysizes,延迟加载,性能,图像至少需要: 4.9.8 经测试至: 5.7 稳定标签: 7.2.2 需要PHP: 7.0描述延迟加载插件,支持图像,iFrame,视频和...
iframe> ) 另一个窗口中的元素用法将 PlainOverlay 加载到您的网页中。 < script src =" plain-overlay.min.js " > </ script > 这是最简单的情况: PlainOverlay . show ( ) ; // Static method ...
说明:控制弹出窗口是否显示上方的标题栏,默认为显示,若需要显示一个更定制个性化的iframe窗口,可通过此参数隐藏上方的标题栏 upBtnText:上传按钮的文字 参数值:任意字符串,默认值:“上传” 备注:1.0.0 beta2...
MyPopup不仅模拟了alert、confirm、propmt等等控件,还扩展出tip(小提示框)、loading(加载中)、iframe(框架)、open(常规弹窗)、blank(空白弹出层)等等常用的弹出层。让我最满意的是tip()方法,它依附于...
1、 url参数加载外部页面的时候显示loading动画 2、 预加载皮肤背景图片 3、 优化拖动 v2.0.6 1、 解决页面载入即弹出的情况造成水平对齐不正常的BUG(主要是dom ready事件 绑定) 2、 增加parent参数,支持...
- iframe 打开url 优化。解决canvas问题 - 文件编辑器,载入loading去掉 - 删除错误时,或上传错误时也刷新目录。删除提示颜色错误 - 对话框右键 点击右键菜单隐藏修复 - 手机端 touch =双击 - 文件列表 ...
mxp/预先加载页面,有些象flash前面的loading效果 mxp/从新加载Drreamweaver的各项插件,对于插件开发者来说就不用重复的启动关闭Dreamweaver了 mxp/让你的页面变的讨厌透顶,建议不要使用 mxp/轻松的在WEB页面中...
22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开无效页面 22.10 用JavaScript调用Google AdSense 22.11 Ajax效果:可拖拽的表格 22.12 JavaScript调用Web Service ...
22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开无效页面 22.10 用JavaScript调用Google AdSense 22.11 Ajax效果:可拖拽的表格 22.12 JavaScript调用Web Service ...