文档准备块内的窗口onload代码的意外行为
Unexpected behavior of code in window onload within document ready block
使用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">
相关文章:
- WebSocket握手:意外的响应代码:404
- SyntaxError:意外的标记else(我在代码中找不到错误)
- 代码点火器:搜索自动完成 JSON 解析意外字符
- 意外令牌 ) 在我的代码中
- 意外的响应代码426
- 为什么console.log()在我的代码中输出意外的0
- 此代码出现意外的令牌错误
- 调用加载的顺序函数会意外中断代码
- Javascript教科书中给出意外错误的示例代码
- 代码显示意外行为
- 编写简单的代码行时发生意外错误
- Node.js使用 Socket.io 的应用程序在OpenShift主机上给出“意外响应代码:400”
- 语法错误:我的 js 代码中出现意外的令牌变量
- 语法错误:意外的令牌,其他:特定代码
- php代码中if语句中的意外行为
- FOR类型循环中的大括号,意外地更改了代码的结果
- WebSocket握手期间出错:意外的响应代码:500
- 意外字符串,What'这段代码错了
- 未捕获的SyntaxError:意外的token变量;当试图编写一小段代码来比较JavaScript中两个对象的属性时
- 电子ES6代码意外的令牌导入