Question

我们都知道我们可以多次使用document.ready，它们将按照脚本中提到的顺序逐个执行。

我们也知道我们只能使用window.onload一次。

这里的问题是，如果我们使用window.onload将会发生什么？是这个错误还是第一个将被执行而休息被忽略或最后一个将被执行而休息被忽略？

Answer 1

jsFiddle：https://jsfiddle.net/CanvasCode/ouk7aatj/

将触发最后一次onload，并忽略所有先前的onload语句

window.onload= function() {
  alert("Onload 1");
};

window.onload= function() {
  alert("Onload 2");
};

var i = 0;

window.onload= function() {
     i = 10;
  alert(i);
};

window.onload= function() {
    i++
  alert(i);
};

输出：1

你可以将一个函数附加到window.onload事件监听器，如果你想让它“行动”与document.ready

一样

jsFiddle：https://jsfiddle.net/CanvasCode/ouk7aatj/1/

window.addEventListener('load', function (){
    alert('Function #1');
});

window.addEventListener('load', function (){
    alert('Function #2');
});

Answer 2

首先，$(document).ready(...)和window.onload之间存在根本差异。第一个是在加载HTML文档之后发生的，当窗口加载时发生本地onload，这意味着资源（图像......）也被加载。

采用以下示例：

window.onload = function () { console.log(1); }
window.onload = function () { console.log(2); }

意思是第一个函数通过指向第二个函数被覆盖。 2，永远不会执行console.log(1)。

另一方面你的jQuery：

$(document).ready(function () { console.log(1); });
$(document).ready(function () { console.log(2); });

将调用这两个函数，输出将同时为1和2。

Answer 3

原因是$(document).ready(fn)是jQuery提供的一个函数，它接受一个函数并将其添加到一个队列中，该队列在文档准备就绪时执行。

另一方面，window.onLoad是窗口对象上的一个属性，当加载页面时，浏览器会调用该属性。因此，如果您访问它两次，它将被覆盖。如果您执行类似的操作，您可以构建与$(document).ready(fn)的界面类似的东西：

window.onLoadQueue = []

window.onLoad = function() {
    window.onLoadQueue.forEach(function(fn) {
        fn()
    });
};

window.addOnLoad = function(fn) {
    // TODO: test if fn is a function
    window.onLoadQueue.push(fn);
}

window.onload和document.ready：多次指定的执行顺序

3 个答案: