专栏首页java达人$(window).load()与$(document).ready()的区别

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

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()都将被覆盖;

Js代码

<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下载框执行隐藏。

Java代码

<script>  
$(document).ready(function(){  
$(".the_body a").attr("onclick","alert('test')");  
});  
$(window).load(function(){  
$(".close_btn").click(function(){  
$("#app_down").hide();  
});  
});  
</script>  

另外,$(document).ready()还有多种形式的写法,有$().ready( function(){} ); 有$(document).ready( function(){});还有$(function(){}).

本文分享自微信公众号 - java达人(drjava)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-06-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery(function(){})与(function(){})(jQuery)的区别

    一、先看 jQuery(function(){ }); 全写为 jQuery(document).ready(function(){ }); ...

    java达人
  • 决策树是如何工作的

    作者:Rahul Saxena 译者:java达人 来源:http://dataaspirant.com/2017/01/30/how-decision-tre...

    java达人
  • 认识九大经典sql模式

    小结果集,源表较少,查询条件直接针对源表 对于典型的OLTP应用,多为返回小结果集的查询。如果过滤条件直接针对源表,我们必须保证这些过滤条件高效,对于重要的字...

    java达人
  • 11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)

    这篇文章我会介绍 11 在开发过程中经常遇到的 CSS 相关知识点,以及 11 个有趣亦实用的 JavaScript 特性。

    用户1462769
  • JavaScript作用域闭包(你不知道的JavaScript)

    JavaScript闭包,是JS开发工程师必须深入了解的知识。3月份自己曾撰写博客《JavaScript闭包》,博客中只是简单阐述了闭包的工作过程和列举了几个示...

    奋飛
  • javascript基础详解-作用域

    JavaScript语言的作用域仅存在于函数范围中。这是必须要牢记的一点,还有一点重要的就是作用域的提升规则。

    用户2458785
  • [第18期] 一文搞清 Javascript 中的「上下文」

    上下文是 Javascript 中的一个比较重要的概念, 可能很多朋友对这个概念并不是很熟悉, 那换成「作用域」 和 「闭包」呢?是不是就很亲切了。

    用户6900878
  • Cocos2d-js中的简易MVC框架(三)中介者Mediator

    Mediator作为这套MVC框架的核心部分承载了大部分的功能。Mediator主要分三类:DirectorMediator,SceneMediator,Lay...

    用户1428723
  • rotateY()

    Html5知典
  • 喜马拉雅、ctrip、b站、流利说、蜻蜓FM、爱回收前端面试经历

    我的回答是[1,2,6,4,3,5]。这道题目主要考对JS宏任务和微任务的理解程度,JS的事件循环中每个宏任务称为一个Tick(标记),在每个标记的末尾会追加一...

    前端迷

扫码关注云+社区

领取腾讯云代金券