$(document).ready()与 window.onload执行时机

时间 2019-11-10

标签 document ready window.onload window onload 执行时机栏目 JavaScript 繁體版

原文原文链接

　　$(document).ready()方法和window.onload方法有类似的功能，可是在执行时机方面是有区别的。window.onload方法是子啊网页中的全部元素（包括元素的全部关联的文件）彻底加载到浏览器后才执行，即javascript此能够访问网页中的任何元素。而经过jquery中的$(document).ready()方法注册的时间处理程序，在DOM彻底就绪时就能够被调用。此时，网页的全部元素对jquery而言都是能够访问的，可是，这并不意味着这些元素关联的文件都已经下载完毕。javascript

　　举一个例子，有一个大型的图库网站，为网页中的全部图片添加某些行为，例如单机图片后让他隐藏或显示。若是使用window.onload方法来处理，那么用户必须等到每一副图片都加载完毕后，才能够进行操做。若是使用jquery中的$(document).ready()方法来进行设置，只要DOM就绪就能够操做了，不须要等待全部图片加载完毕。显然，吧网页解析为DOM树的速度比吧网页中的全部关联文件加载完毕的素的快不少。html

　　另外，须要注意一点，因为在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，所以可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，而且已经即诶下为DOM树了，但颇有可能图片还未加载完毕，全部例如图片的高度和宽度这样的属性此时比必定有效。要解决这个问题，可使用Jquery中另外一个关于页面加载的方法-----load（）方法。load（）方法会在元素的onload事件中绑定一个处理函数。若是处理函数绑定给window对象，则会在全部内容（包括窗口。框架，对象和图像等）加载完毕后触发，若是处理函数绑定在元素上，则会在元素的被容加载完毕后加载。jquery代码以下：java

$(window).load(function(){
//代码

});

　　等价于javascript中的如下代码：jquery

window.onload=function(){
    
//代码
}

例如1：时间加载对比：浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
   var startTime = new Date().getTime();
   $(document).ready(function(){
		test1();
  })
	
  function test1(){
      var endTime2  = new Date().getTime(); 
	  var a = endTime2 - startTime;
	  $("<div>jQuery的ready() : "+a+" ms</div>").appendTo("body");
  }

  function test2(){
       var endTime1  = new Date().getTime();
	   var b = endTime1 - startTime;
	   $("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("body");
  }
</script>
</head>
<body  onload="test2();">
	<img src="demo.jpg" style="width:200px;height:200px;"/>
</body>
</html>

window.onloadapp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
 function one(){
   alert("one");
 }
 function two(){
   alert("two");
 } 
 window.onload = one ;
 window.onload = two ;
</script>
</head>
<body>

</body>
</html>

document.ready框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
  function one(){
   alert("one");
 }
 function two(){
   alert("two");
 } 
  $(document).ready(function(){
      one();
  })
  $(document).ready(function(){
      two();
  })
</script>

</head>
<body>

</body>
</html>

出处：锋利的jquery第二版 P99函数