1.执行时间不同:
从字面的意思上理解,$(document).ready()就是文档准备好了,也就是浏览器已经解析完整个html文档,dom树已经建立起来了,这时就可以通过class属性或者id属性等等对dom进行操作等。
而$(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了,但页面不一定加载完毕,如一些大的图片等,加载完成就需要一定的时间;但是页面加载完毕后,dom肯定也就建立起来了;但是有些文字或者图片链接等需要在文档加载完毕前,dom树建立后就进行的,这时就要用到$(document).ready()了。
2.可以被执行的次数不同:
$(document).ready()可以在JavaScript代码中出现多次,并且里面的函数或者代码都可以得到执行; 而$(window).load()只能在JavaScript代码中出现一次,如果有多个$(window).load(),那么只有最后一个$(window).load()里面的函数或者代码才会执行,之前的$(window).load()都将被覆盖;
<script> $(document).ready(function(){ alert("test1");//这段代码会被执行 }); $(document).ready(function(){ alert("test2");//这段代码会被执行 }); $(window).load(function(){ alert("test1");//这段代码不会被执行 }); $(window).load(function(){ alert("test2");//这段代码将被执行 }); </script>
3.执行的效率不同:
如要在dom的元素节点中添加onclick属性节点,这时用$(document).ready()就要比用$(window).load()的效率高;但是在某些时候还必须得用$(window).load()才行,如之前写的app下载,如果要关闭这个下载框,则必须要在整个下载框加载完毕后,才能点击关闭图标,对app下载框执行隐藏。
<script> $(document).ready(function(){ $(".the_body a").attr("onclick","alert('test')"); }); $(window).load(function(){ $(".close_btn").click(function(){ $("#app_down").hide(); }); }); </script>
相关推荐
JQ中的$(document).ready()大家应该用的非常多,基本每个JS脚本中都有这个函数的出现有时甚至会出现多个,那么另一个加载函数$(window).load相对出现的次数就很少了,下面为大家介绍一下两者的区别与他们的执行顺序 ...
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...
在jquery中,则使用$(document).ready()方法。下面介绍一下两者的区别。 [removed]() $(document).ready() 执行时机 在页面所有元素(包括图片,引用文件)加载完后执行。 页面中所有HTML DOM,CSS DOM结构...
主要介绍了jquery中ready()函数执行的时机和window的load事件比较的相关资料,需要的朋友可以参考下
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload...
主要介绍了jQuery中document与window以及load与ready 区别详解,需要的朋友可以参考下
tips[25] = '个人行为与小规模配合压根不需要流程与规范,当交付结果需要大规模的应用时,同一的规格就显得非常重要了。'; tips[26] = '任何创作活动都是为了满足一定的需求,创新是执行过程中的副产品;为了创新而...
(function(f){f(document).ready(function(){f("body").append('<div id="supersized-loader"></div><ul id="supersized"></ul>')});f.supersized=function(i){var e="#supersized",h=this;h.$el=f(e);h.el=e;vars=f...
一,问题发现: 最近公司有个微信公众号项目,为了方便直接使用anular.js+ionic进行开发,里面有使用到echarts图表,具体开发... angular.element(window).bind('load', function() { alert(加载完毕); }); aler
一、事件 1 加载DOM 代码如下: $(document).ready(function(){//…}) DOM加载完毕后执行,在可重复使用上区别于[removed]=function(){//…} $(window).load(function(){//…}) window内所有对象加载完毕后执行,几...
一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供...
如果您在document.ready状态下执行所有 AJAX,那么您可以在window.load状态中设置一个计时器以在它们完成时运行代码。 ##jquery.ajax.tracker.js 加载 jQuery后将它包含在您的项目中,它将覆盖默认的$.ajax 、 $....
$ document ready function { $ document bind "contextmenu" function e { return false; } ; } ; 2 搜索输入框文字的消失 当鼠标获得焦点 失去焦点的时候 input输入框文字处理: $ document ...
$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。 简单地说,这个方法纯粹是对向window.load事件注册事件...
用法: // use $(window).load instead of $(document).ready to wait until all images have been loaded.// Otherwise common height may be calculated without taking all images into account$(window).load...
他们的区别就是,ready是在DOM的结构加载完后就触发,load是在页面内包括DOM结构,css,js,图片等都加载完成后再触发,显然ready更适合作为页面初始化使用。但有时候也不尽然。需要进一步查看其内部机制。 那么...
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...
所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。因此,使用load方法时尽量把load方法写在页面顶部。调用load方法的完整格式是:load( url, [data], [callback] ), ...