嵌套的$(document).ready()和$(window).load()事件之间的区别

时间:2016-09-28 06:49:06

标签: javascript jquery

我知道这些状态之间的基本区别,但我们的一个项目中出现了一个奇怪的问题

jQuery(document).ready(function () {
   console.log('Dom is ready');
   jQuery(document).ready(function () {
       console.log('Inner Dom ready');
   });
});

结果: -

Dom is ready
Inner Dom ready

现在,在任何时候,只要我调用document.ready(),就会执行其处理程序。

但如果你看看这个

jQuery(window).load(function () {
    console.log('Window Loaded');
    jQuery(window).load(function () {
        console.log('Inner window load');
    });
});

结果: -

Window Loaded

为什么内部窗口加载永远不会执行其处理程序,即使窗口已经加载。

感谢您的评论和回答,但我很想知道它们是如何在内部工作的,我同意jQuery(窗口).load()事件只触发一次因此没有任何其他加载事件处理程序执行的可能性为什么此规则不适用于jQuery(document).ready()。它是否会设置某种旗帜或某种东西,并在每次调用时进行检查。

1 个答案:

答案 0 :(得分:5)

加载HTML文档并准备好DOM时,

$(document).ready()执行。因此内部ready()会调用,因为DOM已经准备好了。 ready()仅检查当前状态与先前状态不比较。所以这样的条件

if state=="ready" then invoke latest $(document).ready();

这种情况适用于所有级ready()方法。

<强> BUT

$(window).load()在完整加载完整页面时执行,包括所有帧,对象和图像。以简单的方式,当状态从另一个状态变为加载状态时,执行load()。当状态从另一个状态加载时执行第一个load(),但未检测到内部load()并且状态发生更改,因此不会执行。

if (is_state_changed=true AND current_state=="ready" AND current_state !== previous_state) then invoke latest $(window).load();

对于第一个/外部load(),上述条件为真,但对于内部load()不适用,因为内部load()

的状态未更改(保持不变)