window.onload与$(document).ready()的区别

以浏览器装载文档为例，在页面加载完毕后，浏览器会通过Javascript为DOM元素添加事件。在常规的Javascript代码中，通常使用window.onload方法，而在Jquery中，使用的是$(document).ready()方法。$(document).ready()方法是事件模块中最重要一个函数，可以极大的提高Web应用程序的速度。

	window.load	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后(包括图片)才能执行	网页中所有DOM结构绘制完毕后就执行，可以能DOM元素关联的内容并没有加载完
编写个数	不能同时编写多个以下代码无法正确执行： window.onload = function(){ alert(“text1”); }; window.onload = function(){ alert(“text2”); }; 结果只输出第二个	能同时编写多个以下代码正确执行： $(document).ready(function(){ alert(“Hello World”); }); $(document).ready(function(){ alert(“Hello again”); }); 结果两次都输出
简化写法	无	$(function(){ // do something });

另外，需要注意一点，由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的html下载完毕，并且已经解析为DOM树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用Jquery中另一个关于页面加载的方法---load()方法。Load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

Jquery代码如下：

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

等价于JavaScript中的以下代码

Window.onload = function(){
// 编写代码
}

转载于:https://blog.51cto.com/webview/318902

window.onload与$(document).ready()的区别相关推荐

window.onload与document.ready的区别
1. window.onload必须等到网页中所有的内容加载完(包含图片)才执行 document.ready网页中所有DOM结构绘制完执行,可能DOM并没有加载完所有document.ready比 ...
window.onload和$(document).ready(function(){})的区别
前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...
window.onload和$(document).ready()区别很大……
window.onload和$(document).ready()区别很大-- posted on 2014-06-11 14:01 Juniors 阅读(...) 评论(...) 编辑收藏转载于 ...
jquery (js中window.onload与jquery中$(document.ready())的区别)
jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别) 耳听为虚,眼见为实.通过下面的实例可查看两者的异同(注意:aa.jpg最好是一张 ...
JQ中$(window).load和$(document).ready()使用，区别与执行顺序
本文内容借鉴http://www.jb51.net/article/107111.htm(阅读原文请跳转此链接!) 一般情况下一个页面响应加载的基本顺序是:域名解析 -> 加载html -> ...
$(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小, $(document).height()则代表 ...
html——windows.onload()与$(document).ready()区别
最近开始写html,原来基本学的都是皮毛,js与jquery混写,现在分开后,初始化的两个函数有点不太清楚就总结了下. 浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在java ...
Dom onload和jQuery document ready的区别
使用如下代码进行测试: <html> <script src="jquery_1.7.1.js"> </script> <script&g ...
window. onload=function(){} 与 $(function(){}) 的区别
页面加载事件:window.οnlοad=function(){} 和 $(function(){}); 1.window.οnlοad=function(){}是js原生的事件: 2.$(funct ...

window.onload与$(document).ready()的区别

window.onload与$(document).ready()的区别相关推荐

最新文章

热门文章