window.onload
window.onload
load事件通常用于检测文档内容或者图片是否加载完毕。
网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免类似情况的发生，可以使用以下两种方式:
- 将脚本代码放在网页的底端，运行脚本代码的时候，可以确保要操作的对象已经加载完成。
- 通过window.onload来执行脚本代码。
示例：
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F90";
</script>
</head>
<body>
<div id="bg"></div>
</body>
代码的初衷是将div的背景颜色设置为#F90，但是并没有实现此效果，因为代码是顺序执行的，当执行到document.getElementById("#bg").style.backgroundColor="#F90"的时候，还没有加载到此div对象，所以设置也就不能够成功。代码修改如下:
<style type="text/css">
#bg{
width:100px;
height:100px;
border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("bg").style.backgroundColor="#F90";
}
</script>
</head>
<body>
<div id="bg"></div>
</body>
$(document).ready
$(document).ready
定义和用法
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档，因此无需选择器。
两者区别
- 两个方法执行的时间是不一样的
-
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 -
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 - 假如用window.onload，页面上的js有个报错或者找不到图片等资源，就会一直等着。
- 两个方法重复执行的问题
-
window.onload只能执行一次，假如写了多个该方法只执行最后的一个。 -
$(document).ready()可以写多个，执行顺序是按照编写的顺序进行执行。 - 如果两个方法都写了，那么
$(document).ready()是比window.onload要先执行的。
- 简化写法
-
window.onload没有简化写法 -
$(document).ready(function(){})可以简写成$(function(){}); -
$(document).ready()方法和window.onload方法有相似的功能，但是在执行时机方面是有区别的。window.onload方法是在网页中所有的元素（包括元素的关联文件）完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，可以在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。
document.onDOMContentLoaded
document.onDOMContentLoaded
当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash
开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函数。
当然DOMContentLoaded机制更加合理，因为我们可以容忍图片，flash延迟加载，却不可以容忍看见内容后页面不可交互。
网友评论