0

使用 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。但是，如果我完全删除窗口加载条件，如下所示：

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

...然后它可以工作，或者如果我将窗口 onload 移到准备好的文档之外，如下所示：

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

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

...然后它也有效。在JQuery 迁移/升级信息页面上，有文档显然正在解决我的示例中发生的情况。

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

4

3 回答 3

0

尝试使用：

$(document).ready(function(){
    $('#my_div').css('visibility', 'visible');
    });
于 2016-06-24T02:19:38.013 回答
0

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

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

<img src="http://placehold.it/300x300">
于 2016-06-24T02:47:48.643 回答
0

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

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

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

$(window).on('load', function() {
    $('#my_div').css('visibility', 'visible');
});
于 2016-06-24T02:42:04.793 回答