场景
系统主页index.jsp中包含一个iframe，iframe连接的是待办处理页面towork.jsp，以前没有使用jquery时，index页面会很快展现出来，待办数据很多的情况下towork页面会展现的慢些；后来在index页面使用了jquery页面载入事件$(document).ready(function() {//自己的代码})，并且在ready事件中进行页面展现的动画控制，index页面会和towork页面同时展现，当然等待的时间有时很长些。
分析
jquery页面载入事件ready(fn) 的api中说的是在页面dom元素全部加载并可以调用时调用该事件；那么iframe是index页面的一个元素，它把towork页面的元素视为iframe的子元素。所以index页面的ready(fn) 事件要等待index中的元素和iframe中的元素全部加载后才能被调用。
测试结果
jquery页面载入事件ready(fn) 和页面非ready(fn)事件方法的调用顺序为：父页面（index）的非ready(fn)事件方法（js方法、页面渲染展示（未放在ready事件中控制的话）） à 子页面（towork）的非ready(fn)事件方法（js方法、页面渲染展示（未放在ready事件中控制的话）） à 子页面（towork）的ready(fn)事件方法 à 父页面（index）的ready(fn)事件方法（已经在jquery1.3.1、1.4、1.4.4、1.6.4版本中测试通过）。
Index.html源代码：
<html>
<head>
<title>111</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script language="javascript">
$(document).ready(function() {
alert('11');
})
function frameResize(iframe) {
alert('22');
}
</script>
</head>
<body>
<iframe src="a.html" onload="frameResize()"></iframe>
</body>
</html>
<script language="javascript">
alert('33');
</script>
Towork.html源代码：
<html>
<head>
<title>111</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script language="javascript">
$(document).ready(function() {
alert('44');
})
</script>
</head>
<body>
</body>
</html>
<script language="javascript">
alert('55');
</script>
分享到：
相关推荐
（3）可以在同一个页面中无限次地使用$(document).ready()事件； （4）其中注册的函数会按照（代码中的）先后顺序依次执行。 2、事件格式 $(document).ready(function(){ //jQuery代码 }); 3、实例 代码如下: <!...
- 页面载入：jQuery提供$(document).ready(callback)或$(callback)来确保在DOM完全加载后执行指定的函数。避免与的onload事件冲突，否则可能无法触发$(document).ready()。 - 核心函数：$(expression,[context])是...
jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数，那就是ready… 他在页面加载完成之前执行。 （也许window.onload()能实现同样的功能，但是jQuery更加快速，灵活）。 $(document).ready(fn):当DOM...
页面载入 ready(fn) 事件处理 on(eve,[sel],[data],fn)1.7+ off(eve,[sel],[fn])1.7+ bind(type,[data],fn) one(type,[data],fn) trigger(type,[data]) triggerHandler(type, [data]) unbind(t,[d|f]) ...
页面载入 ready(fn) 事件处理 bind(type, [data], fn) one(type, [data], fn) trigger(type, [data]) triggerHandler(type, [data]) unbind([type], [data]) 事件委派 live(type, fn) die([type], [fn]) ...
页面载入 ready(fn) 事件处理 bind(type, [data], fn) one(type, [data], fn) trigger(type, [data]) triggerHandler(type, [data]) unbind([type], [data]) 事件委派 live(type, fn) die([type], [fn]) ...
1. **页面载入完毕响应事件** - `$(document).ready()`事件是jQuery中最关键的事件处理函数，用于在DOM（文档对象模型）完全加载并准备就绪时执行指定的函数。它替代了传统的`window.onload`事件，因为`$(document)...
) prevAll([expr]) prevUntil([expr]) siblings([expr]) 串联 andSelf() end() 事件页面载入 ready(fn) 事件处理 bind(type, [data], fn) one(type, [data], fn) trigger(type, [data]) triggerHandler(type, [data]...
- **事件处理**：通过 `$(document).ready()` 等方法绑定事件处理器，实现更复杂的交互逻辑。 #### 四、总结 jQuery 提供了一系列强大且易于使用的 API，极大地简化了网页开发的过程。通过对这些核心函数的理解和...
在今天的网络浏览器处理事件是有点困难的一... Page Load事件 就绪（FN）， 这是所有类型的事件，jQuery的支持的基础上。你可能想设置形式的焦点，当页面被载入或做一些UI效果。 代码如下: $(document).ready(functi
首先我解释一下jQuery jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数，那就是ready… 他在页面加载完成之前执行。 为什么不用[removed]()，因为[removed]函数执行的时候，要说明所有东西已经载入，...
- **说明**: `$(document).ready()` 的速记方式，当文档全部载入时执行函数。可以有多个 `$(fn)`，当文档载入时，同时执行所有函数。 - **示例**: ```javascript $(function() { // 执行一些操作 }); $...
你可以在一个页面中使用任意多个$(document).ready事件。 参考 ready(Function) 获取更多 ready 事件的信息。 -------------------------------------------------------------------------------- A shorthand ...