`

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

    博客分类:
  • js
 
阅读更多

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中$(window).load和$(document).ready区别与执行顺序

    JQ中的$(document).ready()大家应该用的非常多,基本每个JS脚本中都有这个函数的出现有时甚至会出现多个,那么另一个加载函数$(window).load相对出现的次数就很少了,下面为大家介绍一下两者的区别与他们的执行顺序 ...

    JQuery下关于$.Ready()的分析

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...

    一张表格告诉你windows.onload()与$(document).ready()的区别

    在jquery中,则使用$(document).ready()方法。下面介绍一下两者的区别。   [removed]() $(document).ready() 执行时机 在页面所有元素(包括图片,引用文件)加载完后执行。 页面中所有HTML DOM,CSS DOM结构...

    jquery中ready()函数执行的时机和window的load事件比较

    主要介绍了jquery中ready()函数执行的时机和window的load事件比较的相关资料,需要的朋友可以参考下

    JQuery Tips相关(1)—-关于$.Ready()

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法  接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里.  对于Body的Onload...

    jQuery中document与window以及load与ready 区别详解

    主要介绍了jQuery中document与window以及load与ready 区别详解,需要的朋友可以参考下

    图库新版jQuery焦点图 JS代码

    tips[25] = '个人行为与小规模配合压根不需要流程与规范,当交付结果需要大规模的应用时,同一的规格就显得非常重要了。'; tips[26] = '任何创作活动都是为了满足一定的需求,创新是执行过程中的副产品;为了创新而...

    supersized.min

    (function(f){f(document).ready(function(){f("body").append('&lt;div id="supersized-loader"&gt;&lt;/div&gt;&lt;ul id="supersized"&gt;&lt;/ul&gt;')});f.supersized=function(i){var e="#supersized",h=this;h.$el=f(e);h.el=e;vars=f...

    Angular.js中[removed](),$(document).ready()的写法浅析

    一,问题发现: 最近公司有个微信公众号项目,为了方便直接使用anular.js+ionic进行开发,里面有使用到echarts图表,具体开发... angular.element(window).bind('load', function() { alert&#40;加载完毕&#41;; }); aler

    锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)

    一、事件 1 加载DOM 代码如下: $(document).ready(function(){//…}) DOM加载完毕后执行,在可重复使用上区别于[removed]=function(){//…} $(window).load(function(){//…}) window内所有对象加载完毕后执行,几...

    jquery ready函数源代码研究

    一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供...

    ajax-request-tracker:覆盖 jQuery 或 Angular 中的 AJAX Get 和 Post 操作并跟踪有多少是活动的

    如果您在document.ready状态下执行所有 AJAX,那么您可以在window.load状态中设置一个计时器以在它们完成时运行代码。 ##jquery.ajax.tracker.js 加载 jQuery后将它包含在您的项目中,它将覆盖默认的$.ajax 、 $....

    jQuery开发技巧

    $ document ready function { $ document bind &quot;contextmenu&quot; function e { return false; } ; } ; 2 搜索输入框文字的消失 当鼠标获得焦点 失去焦点的时候 input输入框文字处理: $ document ...

    jQuery实例教程

    $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。 简单地说,这个方法纯粹是对向window.load事件注册事件...

    syncHeight:自动同步与给定选择器匹配的元素的高度属性的 jQuery 插件

    用法: // 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...

    jquery事件的ready()方法使用详解

    他们的区别就是,ready是在DOM的结构加载完后就触发,load是在页面内包括DOM结构,css,js,图片等都加载完成后再触发,显然ready更适合作为页面初始化使用。但有时候也不尽然。需要进一步查看其内部机制。 那么...

    jQuery详细教程

    您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...

    jquery load事件(callback/data)使用方法及注意事项

    所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。因此,使用load方法时尽量把load方法写在页面顶部。调用load方法的完整格式是:load( url, [data], [callback] ), ...

Global site tag (gtag.js) - Google Analytics