说明

在Jquery里面,我们可以看到两种写法:
1:$(function(){})
2:$(document).ready(function(){})
结果:这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)。
onload,指示页面包含图片等文件在内的所有元素都加载完成。

document添加一个ready函数

  1. document.ready = function (callback) {
  2. ///兼容FF,Google
  3. if (document.addEventListener) {
  4. document.addEventListener('DOMContentLoaded', function () {
  5. document.removeEventListener('DOMContentLoaded', arguments.callee, false);
  6. callback();
  7. }, false)
  8. }
  9. //兼容IE
  10. else if (document.attachEvent) {
  11. document.attachEvent('onreadystatechange', function () {
  12. if (document.readyState == "complete") {
  13. document.detachEvent("onreadystatechange", arguments.callee);
  14. callback();
  15. }
  16. })
  17. }
  18. else if (document.lastChild == document.body) {
  19. callback();
  20. }
  21. }


验证一下最上面所说的“ready要比onload先执行”

 window.onload = function () {
   alert('onload');

 };

document.ready(function () {
  alert('ready');

});

总结

document.ready:可多次执行,速度比window.onload快window.onload:只能执行一次,速度比document.ready慢**