javaScritpt学习记录（一）-window.onload = function(){} 与$(document).ready(function(){})区别

最新推荐文章于 2021-01-14 20:19:17 发布

张晓花

最新推荐文章于 2021-01-14 20:19:17 发布

阅读量415

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/DAMMXX/article/details/77417789

版权

javaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网上大多数都在介绍$(document).ready(function(){})执行要先于window.onload = function(){} 原因在于前者事当html中的DOM树执行完毕后就执行，而后者是页面所有都执行完毕后才执行。但是也不乏有特殊的情况，这种说法是有问题的。那么接下来我我们看一下JQuery.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 );

很显然不是网上说法$(document).ready(function(){})先于window.onload 执行是不对的。javaScript虽然为动态弱语言，但是在执行只有依然是雨染堆栈的方式执行的，只有将任务存放近任务执行队列中的任务才能执行。但是意外的情况很少。基本上$(document).ready(function(){})执行比较靠前。

除此之外$(function(){}) 是$(document).ready(function(){ }) 的简写代替页面中的window.onload()（等价于$(window).load(function(){...})）
但是两者有区别:
一、加载的时机
window.onload:必须等到页面内包括图片的所有元素加载完毕后才能执行
$(document).ready(function(){})是DOM的结构绘制完毕就执行，不必等待加载完毕：

举个例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- 引入jquery 文件 -->
<script type="text/javascript" src="js/jquery.1.3.2.min.js"></script>
<!-- 引入扩展jquery-->
<script type="text/javascript" src="js/jquery.extends.js"></script>
<script type="text/javascript">
    // 情形一
	$(function(){
		$("#_inp").click(function(){
			alert("测试成功"); // 成功打印结果
		});
	});
	
	// 情形二
	$("#_inp").click(function(){
			alert("测试成功"); // 无法打印结果
		});
</script>
</head>
<body>
	<input id="_inp" type="button" value="测试"/>
	<script type="text/javascript">
	// 情形三
	$("#_inp").click(function(){
			alert("测试成功"); // 成功打印结果
		});
	</script>
</body>
</html>

已上三种情形可以说明$(document).ready(funciton(){})是一个后执行函数
二、页面存在的数量：
window.onload:不能编辑多个，页面上只能有一个
$(document).ready()可以同时编写多个，并且都可以得到执行

张晓花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScritpt学习记录（一）-window.onload = function(){} 与$(document).ready(function(){})区别

网上大多数都在介绍$(document).ready(function(){})执行要先于window.onload = function(){} 原因在于前者事当html中的DOM树执行完毕后就执行，而后者是页面所有都执行完毕后才执行。但是也不乏有特殊的情况，这种说法是有问题的。那么接下来我我们看一下JQuery.ready()源码： if ( jQuery.browser.msie && wi
复制链接

扫一扫