Question

使用JQuery＆lt; = 2.x，此代码有效，在所有内容加载后显示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。但是，如果我完全删除窗口的onload条件，就像这样：

$(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专家的澄清将是值得赞赏的，因为我现在需要修改许多文件以适应这种行为，并希望以正确的方式执行它，以及过去发生的预期行为。非常感谢！

Answer 1

尝试使用：

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

Answer 2

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

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

在这个例子中，我没有看到窗口onload事件的任何需要。但是如果你想等待窗口中的所有加载，你可以从文档中的任何地方添加事件监听器，而不需要文档就绪：

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

Answer 3

这对我来说就像一个竞争条件，在你的代码中，文件就绪和窗口加载功能将同时被触发。所以当你附加一个事件已经过的窗口加载监听器时。为什么它适用于旧的jQuery？我不知道并且不在乎，因为正如其他人所指出的那样，你不会那样编码。

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

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

文档就绪块中窗口上载中的代码意外行为

3 个答案: