`
zhangna
  • 浏览: 831 次
社区版块
存档分类
最新评论

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

 
阅读更多

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

 

3.执行的效率不同:
如要在dom的元素节点中添加onclick属性节点,这时用$(document).ready()就要比用$(window).load()的效率高;但是在某些时候还必须得用$(window).load()才行,如之前写的app下载,如果要关闭这个下载框,则必须要在整个下载框加载完毕后,才能点击关闭图标,对app下载框执行隐藏。

 
分享到:
评论

相关推荐

    jQuery(document).ready(function($) { });的几种表示方法

    **第五种:jQuery的`$(document).ready()`与`window.onload()`的区别** - `$(document).ready()`在DOM元素加载完毕后立即执行,不需要等待所有资源(如图片、CSS等)加载完成。 - 相比之下,`window.onload()`需要...

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

    在JavaScript和jQuery中,`$(document).ready()`和`$(window).load()`是两种常见的事件绑定函数,它们分别用于在不同的页面加载阶段执行相应的代码。理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至...

    jquery的$(document).ready()和onload的加载顺序

    3. 使用jQuery的`$.holdReady(true)`和`$.holdReady(false)`组合,来控制`$(document).ready`的执行时机。 4. 如果可能,避免在frame中加载页面,或者确保frame内页面的资源都能正确访问。 理解`$(document).ready...

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

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

    JavaScript类库_JQuery1.8离线Api手册全中文版.zip

    开发者应尽量使用`$(document).ready()`而不是`window.onload`来尽早执行代码,以提高页面加载速度。 **总结** jQuery 1.8 API中文离线手册是开发者不可或缺的参考资料,它详细阐述了jQuery的各种功能和用法。通过...

    jquery $(document).ready() 与[removed]的区别

    但与window.onload不同的是,$(window).load()方法可以与$(document).ready()一起使用,从而允许开发者同时控制页面DOM元素的加载和页面所有资源的加载。 此外,还有一些特殊情况,在所有DOM元素加载之前执行的代码...

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

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

    jquery中的$(document).ready()使用小结

    需要注意的是,如果在HTML页面的标签中使用了onload属性指定了一个加载完成后要执行的函数,比如<body onload="load()">,那么可能会导致$(document).ready()事件无法正常触发。这一点在实际使用中需要特别注意。 ...

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

    为了理解 ready() 函数,我们需要与 window 的 load 事件进行比较,了解它们在页面加载过程中的不同执行时机。 首先,让我们来看看 ready() 函数。ready() 函数在 jQuery 中实现的是 DOMContentLoaded 事件,这是一...

    jQuery 的加载事件

    jQuery提供了多种处理页面加载事件的方法,主要包括`$(document).ready()`, `$(window).load()`以及`$(window).on('load', function() {})`等几种方式。每种方法都有其适用场景和特点,下面将逐一介绍。 ##### 1. `...

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

    传统的window.onload()和$(document).ready()方法并不适用于Angular.js应用,因为它们通常只能正确触发一次,而Angular.js应用可能会因为路由的变化等原因多次触发加载逻辑。因此,要正确地在Angular.js中监听页面...

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

    在探讨jQuery中document与window的区别以及load和ready事件的不同之处时,我们首先需要了解JavaScript中的基本概念以及jQuery是如何封装和简化这些操作的。jQuery作为一个流行的JavaScript库,它提供了一套简化的...

    jQuery mobile在页面加载时添加加载中效果 document.ready 和[removed]执行顺序比较

    本篇文章将深入探讨`document.ready`和`window.onload`两个事件的执行顺序,并提供一个实例来展示如何在页面加载时添加jQuery Mobile的加载中效果。 首先,`document.ready`事件在DOM(文档对象模型)完全加载并...

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

    本文主要探讨了$(document).Ready()、OnLoad事件以及$(window).load()三种常见的方式来确保代码在适当的时机运行。 首先,$(document).Ready()是jQuery中最常用的事件,它在文档对象模型(DOM)完全加载并准备就绪...

    jquery中的$(document).ready()与[removed]的区别

    总结两者的差异,`$(document).ready()` 关注的是 DOM 的加载就绪状态,而不是其他资源的加载情况,这使得它在执行时机上比 `window.onload` 要快得多。而 `window.onload` 则是等待所有资源加载完毕后才执行,这...

    全面解析jQuery中的$(window)与$(document)的用法区别

    在jQuery中,`$(window).load()`和`$(document).ready()`是两种常用的事件绑定,用于在页面加载完成后执行特定的JavaScript代码。然而,它们之间存在关键的区别: 1. `$(document).ready()`: 这个事件在DOM(文档...

    浅谈$(document)和$(window)的区别

    通过这个例子,你可以清楚地看到`$(document)`和`$(window)`的区别,以及它们在实际应用中的不同用途。理解这些基本概念对于编写高效且适应性强的前端代码至关重要。希望这篇分享能帮助到你,让你在面对类似问题时...

Global site tag (gtag.js) - Google Analytics