JQ中$(window).load和$(document).ready()使用，区别与执行顺序

本文内容借鉴http://www.jb51.net/article/107111.htm（阅读原文请跳转此链接！）

一般情况下一个页面响应加载的基本顺序是：域名解析 -> 加载html -> 加载js和css -> 加载图片等其他信息

一、$(document).ready()

从字面的意思上理解，就是文档准备好了。也就是浏览器已经加载并解析完整个html文档，dom树已经建立起来了,然后执行此函数

原生JavaScript中的写法如下：

document.ready=function(){

alert("ready");

}

jQuery中的写法如下：

$(document).ready(function(){

alert("ready");

});

或

$(function(){

alert("ready");

});

二、$(window).load

在网页中所有元素(包括页面中图片,css文件等所有关联文件)完全加载到浏览器后才执行

原生JavaScript中的写法如下：

window.onload = function(){

alert("onload");

};

jQuery中的写法如下：

$(window).load(function(){

alert("onload");

});

两者的区别在于：

1.执行时间不同

$(document).ready()是在页面完成HTML的加载并建立了DOM树之后就开始执行，但这并不代表页面的所

有数据已经全部加载完成，一些大的图片有会在建立DOM树之后很长一段时间才行加载完成，而

$(window).load()就是整个页面已经加载完毕后才执行，包括图片等一些关联文件。

2.可以被执行的次数不同

$(document).ready()可以在JavaScript代码中出现多次，并且里面的函数或者代码都可以执行；而$(window).load()只能在JavaScript代码中出现一次，如果有多个$(window).load()，那么只有最后一个$(window).load()里面的函数或者代码才会执行，之前的$(window).load()都将被覆盖;

3.执行的效率不同

如要在dom的元素节点中添加onclick属性节点，这时用$(document).ready()就要比用$(window).load()的效率高；但是在某些时候还必须得用$(window).load()才行

总结一下就是：$(window).load()在$(document).ready之后执行，且页面中所有内容全部加载完成后才会执行，两者的使用时机一目了然，大家可以自行决定。

转载于:https://www.cnblogs.com/huamiao/p/8573429.html

JQ中$(window).load和$(document).ready()使用，区别与执行顺序相关推荐

window.onload与$(document).ready()的区别
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过Javascript为DOM元素添加事件.在常规的Javascript代码中,通常使用window.onload方法,而在Jquery中,使用 ...
window.onload与document.ready的区别
1. window.onload必须等到网页中所有的内容加载完(包含图片)才执行 document.ready网页中所有DOM结构绘制完执行,可能DOM并没有加载完所有document.ready比 ...
请指出document load和document ready的区别？
共同点:这两种事件都代表的是页面文档加载时触发. 异同点: ready 事件的触发,表示文档结构已经加载完成(不包含图片等非文字媒体文件). onload 事件的触发,表示页面包含图片等文件在内的所有 ...
window.onload和$(document).ready(function(){})的区别
前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...
jquery (js中window.onload与jquery中$(document.ready())的区别)
jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别) 耳听为虚,眼见为实.通过下面的实例可查看两者的异同(注意:aa.jpg最好是一张 ...
window.onload和$(document).ready()区别很大……
window.onload和$(document).ready()区别很大-- posted on 2014-06-11 14:01 Juniors 阅读(...) 评论(...) 编辑收藏转载于 ...
$(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小, $(document).height()则代表 ...
Dom onload和jQuery document ready的区别
使用如下代码进行测试: <html> <script src="jquery_1.7.1.js"> </script> <script&g ...
window.location和document.location的区别分析
用户不能改变document.location(因为这是当前显示文档的位置).但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而 ...

JQ中$(window).load和$(document).ready()使用，区别与执行顺序

本文内容借鉴http://www.jb51.net/article/107111.htm（阅读原文请跳转此链接！）

JQ中$(window).load和$(document).ready()使用，区别与执行顺序相关推荐

最新文章

热门文章