文档就绪块内窗口加载中代码的意外行为答案

【问题标题】：Unexpected behavior of code in window onload within document ready block文档就绪块内窗口加载中代码的意外行为
【发布时间】：2016-10-26 13:17:12
【问题描述】：

使用 JQuery div 中的文本：

<!DOCTYPE html>
<html>
<head>
    <title>JQuery 3 Window onload test</title>
</head>
<body>
    <div id="my_div" style="visibility:hidden">Greetings!</div>
<script src="jquery.js"></script>
<script>
$(function () {
    $(window).on('load', function () {
        $('#my_div').css('visibility', 'visible');
    });
});
</script>
</body>
</html>

使用新的 JQuery 3.0.0，不会显示 div。但是，如果我完全删除窗口加载条件，如下所示：

$(function () {
    $('#my_div').css('visibility', 'visible');
});

...然后它可以工作，或者如果我将窗口加载到文档之外，如下所示：

$(function () {
  // other things I need to do once the document is ready
});

$(window).on('load', function () {
    $('#my_div').css('visibility', 'visible');
});

...那么它也可以工作。在 JQuery 迁移/升级信息页面上，有文档显然正在解决我的示例 here 中发生的事情。

JQuery 专家的澄清将不胜感激，因为我现在需要修改许多文件以适应这种行为，并且希望以正确的方式来处理与过去一样的预期行为。非常感谢！

【问题讨论】：

可能和这次改动有关Breaking change: document-ready handlers are now asynchronous
哦，刚刚看到你链接的就是这个。
不需要在文档就绪块中
同时使用$(window).on("load") 和.ready() 的目的是什么？
@guest271314 我正在使用另一位开发人员的代码，他将每个 onload 窗口侦听器都放在一个文档就绪侦听器中。因为一直工作到现在，我并没有真正质疑过，但正如其他人指出的那样，它并没有真正的意义。

标签： javascript jquery html jquery-3

【解决方案1】：

尝试使用：

$(document).ready(function(){
    $('#my_div').css('visibility', 'visible');
    });

【讨论】：

【解决方案2】：

您可以在文档就绪回调中安全地操作 DOM：

$(function() { // or $(document).ready(), they are equivalent
    $('#my_div').css('visibility', 'visible');
});

在此示例中，我认为不需要窗口 onload 事件。但是，如果您想等待窗口中的所有内容加载，则可以从文档中的任何位置添加事件侦听器，而无需任何文档就绪：

$(window).on('load', function() {
    $('#my_div').css('visibility', 'visible');
});

【讨论】：

【解决方案3】：

在我看来，这就像一个竞争条件，在您的代码中，文档准备就绪和窗口加载功能将同时触发。因此，当您附加一个窗口加载侦听器时，该事件已经过去了。为什么它适用于旧的 jQuery？我不知道也不在乎，因为正如其他人指出的那样，您不会那样编码。

如果您将图像放入文档中，则会延迟加载并触发它。
https://jsfiddle.net/mowglisanu/13wfqdbL/

<img src="http://placehold.it/300x300">

【讨论】：

我正在使用以前的开发人员编写的代码，他几乎在任何地方都这样做。是的，将窗口加载监听器放在文档就绪监听器中似乎没有意义；我仍然很好奇（1）为什么这在以前版本的 JQuery 中有效，（2）是否需要这样做......听起来没有人能想到。跨度>