我有两个问题。首先，这不是我的工作。我目前正在查看别人的JavaScript文件。我无法提供确切的代码，但可以显示出我想知道的内容。
在JavaScript文件中，我看到了很多$(document).ready(function(){});。我知道怎么办$(document).ready，当加载DOM树时将调用回调函数。为什么有人会使用多个$(document).ready回调？我不明白这一点。
另外，我看到的另一件事是$(window).load内部的$(document).ready，如下所示：
$(document).ready(function() {
$(window).load(function() {
//...
});
});
据我所知，$(window).load()当页面的所有内容（如素材资源和图片等）加载时称为。我认为这$(window).load()是最后调用的名称，在之后$(document).ready。在任何时候都$(window).load被称为BEFORE之前$(document).ready，您是否有任何理由要在其中放$(window).load一个$(document).ready？
是的，jQuery 允许该ready事件在 之前被调用load。即使在 IE8（DOMContentLoaded不支持）中，它也以这种方式工作。但让我们看一下下面的代码：
<!doctype html>
<title>Ready vs load test</title>
<style>body {white-space: pre}</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
~function () {
function log(msg) {
document.body.innerHTML += msg + "\n";
}
function handler(msg) {
return function () {
log(msg);
}
}
$(window).load(handler("5. load #1"));
$(document).ready(handler("1. ready #2"));
$(window).load(handler("6. load #3"));
$(document).ready(handler("2. ready #4"));
$(document).ready(function () {
log("3. ready #5");
$(window).load(handler("8. load #6"));
});
$(document).ready(handler("4. ready #7"));
$(window).load(handler("7. load #8"));
}();
</script>
结果是
1. ready #2
2. ready #4
3. ready #5
4. ready #7
5. load #1
6. load #3
7. load #8
8. load #6
查看第 7 行和第 8 行。事件load附加的处理ready是最后一个。因此，通过使用这种方式，我们可以确保之前添加的所有内容（在脚本解析和执行期间）load处理程序都已被调用。
那么使用
$(window).load外部$(document).ready和内部不会对事物的工作方式产生太大影响吗？
实际上它会影响脚本的执行。第一个版本有效，第二个版本无效：
<!doctype html>
<title>Ready vs load test</title>
<style>body {white-space: pre}</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
~function () {
function log(msg) {
document.body.innerHTML += msg + "\n";
}
function handler(msg) {
return function () {
log(msg);
}
}
$(window).load(handler("5. load #1"));
$(document).ready(handler("1. ready #2"));
$(window).load(handler("6. load #3"));
$(document).ready(handler("2. ready #4"));
$(document).ready(function () {
log("3. ready #5");
$(window).load(handler("8. load #6"));
});
$(document).ready(handler("4. ready #7"));
$(window).load(handler("7. load #8"));
}();
</script>
1. ready #2
2. ready #4
3. ready #5
4. ready #7
5. load #1
6. load #3
7. load #8
8. load #6
| 归档时间： |
|
| 查看次数： |
1254 次 |
| 最近记录： |