区别
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个。
$(documrnt).ready()可以同时编写多个,并且都可以得到执行。
3.多个的执行结果
window.onload不能同时写多个,但是有多个时会执行,只是后执行的会将前一次执行的结果覆盖。
$(doucment).ready()可以有多个,并且执行后不会被覆盖。
4.简化写法
window.onload没有简化写法
$ (document).ready(function(){})可以简写成$ (function(){})
JavaScript window.onload
1.使用
该方法用于在网页加载完毕后立刻执行的操作,即当HTML文档加载完毕后,立刻执行某个方法。通常用于< body >元素,在页面完全载入后(包括图片、css文件等等)执行脚本代码。
2.语法
//当只有一个要执行的函数时
window.onload=fn
//页面加载完毕后fn方法会被调用
//有多个要执行的函数时
window.onload=function(){
fn1()
fn2()
fn3()
}
//页面加载完毕后依次执行fn1、fn2、fn3
3.为什么要使用window.onload
JavaScript中的函数方法需要在HTML文档渲染完毕之后才可以使用,如果没有渲染完成,此时的DOM树是不完整的,这样在调用一些JavaScript代码时就可能报“undefined”错误。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>没有使用 window.onload() 测试</title>
<style type="text/css">
#bg{
width:120px;
height:120px;
border:4px solid blue;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F00";
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
//代码会抛出错误:Uncaught TypeError:Cannot read property 'style' of null
//代码是顺序执行的,当执行到js里的语句时,还没有加载div对象
//使用window.onload就可以正常运行
window.onload事件绑定事件处理函数,绑定的是一个匿名函数,也可以是一个具名函数。
jQuery $(document).ready()
1.使用
当DOM(文档对象模型)已经加载,并且页面(包括图像)已经完全呈现时,会发生ready事件。
由于该事件在文档就绪后发生,因此把所有其他的jQuery事件和函数置于该事件中是非常好的做法。
ready()函数规定当ready事件发生时执行的代码。
ready()函数仅能用于当前文档,因此无需选择器。
2.语法
//允许一下三种语法 function 是必需的,规定当文档加载后要运行的函数
$(document).ready(function(){})
$().ready(function(){})
$(function)
注意
1.ready()函数不应与< body οnlοad="" >一起使用。
2.$ (function(){})在window.onload执行前执行的,$(function(){})类似于原生 js 中的DOMContentLoaded事件。
DOM文档加载步骤
1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function(){})内对应代码
5.加载图片等二进制资源
6.页面加载完毕,执行window.onload
以下是一段在所有DOM元素加载之前执行的jQuery代码
<script type="text/javascript">
(function(){
alert("DOM还没加载")
})(jQuery)
</script>
以下是网络内容!!!!
在改frame中的页面的时候,使用jQuery做效果,页面本身也绑定了onload事件。
之后在Firefox下测试正常流畅,IE下要等十几秒jQuery效果才出现。
普遍说法都是$(document).ready()是要在onload之前执行的,当页面图片较大较多的时候,时间差可能会更大。
但是针对上面的问题,IE的jQuery样式没有出现。
接着调试,发现IE下原来绑定的onload方法竟然先于$ (document).ready()的内容执行,而Firefox则是先执行$(document).ready()的内容,再执行原来的onload方法。
翻看jQuery源码看$(document).ready()的实现:
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
jQuery.event.add( window, "load", jQuery.ready );
结果很明了了,IE只有在页面不是嵌入frame中的情况下才和Firefox等一样,先执行$(document).ready()的内容,再执行原来的onload方法。对于嵌入frame中的页面,也只是绑定在load事件上执行,所以自然是在原来的onload绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源,那十几秒的延迟正是它放大出的时间差。