<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();
分享到：
相关推荐
iframe调用加loading特效特别合适远程调用速度慢而等待问题，简单方便
3. 隐藏的iframe加载：页面中还包含了一个`<script>`标签，用于根据浏览器的兼容性插入不同类型的iframe。`if (document.layers)`检查是否支持Netscape的层技术，`document.all`检查是否为IE4或更早版本，`document....
2. **Iframe加载提示**：对于嵌入的Iframe，如果其加载时间较长，插件同样能提供加载指示，确保用户理解内容正在逐步加载，而不是页面出现问题。 3. **自定义样式**：插件允许开发者根据自己的需求定制加载提示的...
为了解决这个问题，开发者们提出了“懒加载”（Lazy Loading）技术，它是一种优化策略，允许我们延迟加载非可视区域的内容，直到用户滚动到相关内容时再进行加载。在JavaScript领域，jQuery库提供了一个优秀的懒加载...
`onreadystatechange`事件会在`iframe`内容发生变化时触发，包括加载中（`loading`）、加载完成（`loaded`）以及加载成功（`complete`）。我们需要结合`iframe`的`readyState`属性来判断是否已完全加载。以下是一个...
本文将深入探讨jQuery中的8种不同的懒加载loading效果及其相关知识点。 一、基本概念 懒加载是一种优化策略，它只在用户滚动到可视区域时才加载图像或特定内容，而不是一次性加载整个页面。这样可以减少初始页面...
基于 JS 判断 iframe 是否加载成功的方法（多种浏览器） 在网页开发中，经常需要动态添加 iframe，然后再对添加的 iframe 进行相关操作。但是，往往 iframe 还没添加完呢，后边的代码就已经执行完了，这时，我们...
这是一款有关网页图片延迟加载的小案例，主要包括了图片随滚动条延迟加载、整个页面loading延迟加载、图片延迟加载、iframe打开页面延迟加载的技术。通过延迟加载技术可以提升网站的性能，有需要的朋友可以下载看看...
当iframe加载一个外部资源时，它会经历一系列的加载状态，包括`loading`、`interactive`和`complete`。当iframe的状态变为`complete`时，表示页面加载完成。然而，由于浏览器的安全机制，我们不能直接监听iframe的`...
它可能包含了HTML结构、CSS样式和JS脚本，演示了如何在框架元素（如`<iframe>`）加载时触发并显示loading效果。 为了实现加载效果，JS代码可能涉及到以下几个关键步骤： 1. 监听框架的“load”事件，当框架内容开始...
vue-friendly-iframe基于Aaron Peter的文章，用于创建动态异步iframe的Vue js组件：http://www.aaronpeters.nl/blog/iframe-loading- vue-friendly-iframe Vue js组件，用于基于以下内容创建动态异步iframe：亚伦·...
type: 'iframe', // 如果视频是通过IFrame加载的，如YouTube // 或者 // type: 'inline', // 如果视频是页面内的标签 }); }); ``` 如果视频源是外部服务，如YouTube或Vimeo，我们可以使用IFrame类型，并提供...
可以考虑使用懒加载（lazy loading）技术，只有当IFrame进入视口时才开始加载。 5. **用户体验**：合理使用IFrame可以提升用户体验，但过度使用可能会导致页面结构复杂，影响加载速度。需要权衡使用IFrame的利弊，...
"两种单个swf loading 动画"指的是使用SWF（ShockWave Flash）格式制作的两种不同的加载动画，这种格式是Adobe Flash的产物，常用于创建交互式内容、游戏以及网页中的动态元素。在网页加载过程中，loading动画可以...
10. **性能优化**：为了提高页面加载速度，可以使用延迟加载（lazy loading）技术，只有当`iframe`进入视口时才开始加载内容。 在这个"测试iframe全"的场景中，可能包括创建不同类型的`iframe`测试，比如跨域加载、...
延迟加载，也称为懒加载（Lazy Loading），是指在需要时才加载资源的技术。这种技术主要用于减少初始页面加载的时间，特别是对于那些大型网站和含有大量图片的页面。延迟加载的主要思想是，只有当用户滚动到特定元素...
在给定的示例中，有多个div，每个div内包含一个img标签，`src`属性指向一个加载中的图片（loading.gif）。开发者尝试通过JavaScript获取这些img的src地址，并根据特定条件进行替换。 问题在于原始代码中存在一些...
通过延迟加载iframe并提供更好的后备用户界面来增强用户体验的Web组件·· 关于该项目 建于 入门 要启动并运行本地副本，请遵循以下简单步骤。 安装NPM软件包 npm install lite-iframe 在项目根目录中包含lite-...
懒加载（Lazy Loading）是一种延迟加载策略，仅在用户滚动到可视区域时才加载图像或其他资源。这样可以避免在页面初始化时就加载大量数据，从而降低服务器负担，加快页面显示速度。 jQuery是广泛使用的JavaScript库...