Hoa*_* Vu 11 javascript jquery onload document-ready
如此线程中所述:window.onload vs $(document).ready().本window.onload应在随后发生的比$(document).ready(),但在这个简单的代码,日志会表明,onload事件发生ready事件之前执行？我在这里想念的是什么？
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<h1>A Simple Site</h1>
<script>
$(document).ready(function() {
console.log("ready event fired");
})
window.onload = function() {
console.log("onload event fired");
}
</script>
</body>
</html>Gaa*_*far 11
问题不在于事件的顺序.它与本机DOM事件周围的jQuery包装器.如果您尝试本机,DOMContentLoaded您会发现它始终运行window.onload.但jQuery事件
$(document).ready将在几毫秒之后出现DOMContentLoaded,在某些情况下可能也会出现window.onload,特别是如果页面没有像下面的代码那样加载很多.这是延迟是由于jQuery的实现.
如果您在代码中取消注释iframe,则需要一些时间来加载导致window.onload延迟,因此$(document).ready将首先出现.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<h1>A Simple Site</h1>
<!-- <iframe src="http://stackoverflow.com"></iframe> -->
<script>
$(document).ready(function() {
console.log("jQuery ready");
})
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM ready");
});
window.onload = function() {
console.log("DOM loaded");
}
</script>
</body>
</html>| 归档时间： |
|
| 查看次数： |
4975 次 |
| 最近记录： |