简介
$( document ).ready(function() {
console.log( "ready!" );
});
在网页文档加载完毕前一个页面是无法安全操纵的。jQuery可以为我们检测到待发状态。
$(document).ready()中的代码在 Document Object Model (DOM) 完毕后会立即执行。
$( window ).on( “load”, function() { … })中的代码需要在全部页面(图片或框架等)完毕后才会执行,而不仅仅是DOM。
简写:
$(function() {
console.log( “ready!” );
});
调用命名函数
function readyFn( jQuery ) {
// 文档加载后执行的代码
}
$( document ).ready( readyFn );
// 或:
$( window ).on( "load", readyFn );
测试
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
});
$( window ).on( "load", function() {
console.log( "window loaded" );
});
</script>
</head>
<body>
<iframe src="http://techcrunch.com"></iframe>
</body>
</html>
运行后在控制台可以看出,在页面还是空白的时候已经”document loaded”了,等行内框架加载好后,才“window loaded”。
优点:
执行时机
使用 $(document).ready()
,你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说,一旦DOM在浏览器中注册后,$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时,特效就可以运行了。
多次执行
window.onload事件每次只能保存对一个函数的引用,他会覆盖掉之前的函数,所以不能再现有行为上添加新的行为。如果引用了多个js文件,每个都需要window.onload方法就导致编码复杂。
使用$(document).ready()
方法能够很好地解决这种问题,每次调用$document.ready()方法都会在现有行为上追加新的行为,这些行为会根据注册顺序依次执行。
function say(str){
alert(str)
}
$(document).ready(function(){
say('hello')
})
$(document).ready(function(){
say('jQuery')
})
//依次弹出hello jQuery