文档准备块内的窗口onload代码的意外行为

Unexpected behavior of code in window onload within document ready block

本文关键字：代码 意外 onload 窗口 文档      更新时间：2023-09-26

使用JQuery <= 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');
});

…然后它就可以工作了，或者如果我把window onload移到文档外面，像这样:

$(function () {
  // other things I need to do once the document is ready
});
$(window).on('load', function () {
    $('#my_div').css('visibility', 'visible');
});

…然后它也会起作用。在JQuery迁移/升级信息页面上，显然有文档解决了我的例子中发生的事情。

如果能得到JQuery大师的澄清，我将非常感激，因为我现在需要修改许多文件来适应这种行为，并且希望以正确的方式实现预期的行为，就像过去一样。很多谢谢!

尝试使用:

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

您可以在document-ready回调中安全地操作DOM:

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

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

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

这看起来像一个竞争条件，在您的代码中，文档准备和窗口加载函数将同时触发。因此，当您附加窗口加载侦听器时，该事件将已经通过。为什么它可以在旧的jQuery中工作?我不知道，也不在乎，因为正如其他人指出的那样，你不会那样写代码的。

如果你在文档中放一个图像，你会延迟加载，你会捕捉到它的触发。
https://jsfiddle.net/mowglisanu/13wfqdbL/

<img src="http://placehold.it/300x300">
相关文章：