window.onload与$(document).ready()

好多人JavaScript中的window.onload与$(document).ready()的用法及作用不是很清楚下面讲一下他们的用法。

首先说一下window.onload的用法 。

window.onload必须要等待网页中的所有元素加载完成后才能执行（包括图片或者文件）

下面是例子：

window.onload=function(){

alert("第一次的输出内容")

};

window.onload=function(){

alert("第二次的输出内容")

};

 

  运行代码结果是输出：第二次的输出内容 证明window.onload不能同时编写多个 相当于重复定义只会输出最后一次定义的，编写代码时要注意用法.

 

 

$(document).ready()就有不同了  他可以同时编写多个 运行时不用等待与DOM相关的所有的元素都加载完成，只要DOM结构绘制完成就可以执行了，多用于图片或文件多的网页的编写，同时$(document).ready() 方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。

下面是代码的例子：

 

$(document).ready(function(){
alert("第一次输出");
});
$(document).ready(function(){
alert("第二次输出");
});

 

 

 输出的结果为第一次输出点击确定输出第二次输出；他是可以同时编写多个的 ，同时还有简便写法

1：

$(function(){
alert("第一次输出");
});
$(function(){
alert("第二次输出");
});

 2：

$().ready(function(){
// 编写代码
}）

 

 以上三种方式可以根据自己的喜好进行选择。

 

 

以下转载

需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。

此时我们可以用$(window).load(function(){....})。他可以弥补不足 也可以是代码更加清晰整洁

 

 

代码如下：

 $(window).load(function() {
           //编写代码
  });
 $(window).load(function() {
        //编写代码
 });

 

 

Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。 这正是用$(window).load(function(){....})的一个原因。可以根据自己的需要进行选择。