`

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

阅读更多
总所周知,

onload是原生JS中的方法,一般通过<body>标签的onloadwindow.onload来实现功能。

$(document).ready()方法是Jquery的方法,功能和onload差不多。

两者区别如下:


1、执行时机不同:

window.onload方法必须等待网页中所有的内容加载完毕后(包括DOM结构、内容、图片)才能执行。

$(document).ready()等待网页中所有的DOM结构绘制完毕之后就执行,可能DOM元素关联的东西并没有加载完。

由 此可见,要是网页比较复杂,$(document).ready()中的代码执行在onload前面。当然早未必是好事,有时候如计算对象的显示位置时因 为需要取指定的对象但是因为内容没有加载就获取了获取到的数据未必正确有时候还可能获取不到。所以遇到这种情况,还是两者权衡一下比较好。

 

2、编写个数不同:

window.onload方法只能写一个,若是有多个,只有最后加载那个才有效。

$(document).ready()可以写多个且每个都执行

 

3、是否有简写:

window.onload没有简写,可以通过window.onload=function(){}实现,也可以通过<body>标签的onload来绑定函数。

$(document).ready()可以简写成$(function(){}),两者是一样的。

分享到:
评论

相关推荐

    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()`是两种常见的事件绑定函数,它们分别用于在不同的页面加载阶段执行相应的代码。理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至...

    document.ready和window.onload.docx

    windows

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

    在JavaScript和jQuery中,`window.onload()` 和 `$(document).ready()` 都是用于处理页面加载事件的关键函数,但它们的执行时机和用法存在显著差异。了解这些区别对于优化前端性能和确保代码正确执行至关重要。 1. ...

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

    在JavaScript和jQuery的世界里,了解`$...理解`$(document).ready()`和`window.onload`的区别以及它们在不同浏览器中的行为,可以帮助开发者编写更稳定、兼容性更好的代码,减少由于加载顺序问题导致的用户体验问题。

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

    在JavaScript和jQuery的世界里,`window.onload` 和 `$(document).ready()` 都是用来确保页面内容加载后执行特定脚本的事件,但它们之间存在一些关键的区别。理解这些差异对于编写高效、响应式的网页至关重要。 ...

    $(document).ready(function() {})不执行初始化脚本

    3. 如果可能,尝试将`$(document).ready()`中的代码移至`window.onload`事件中,看看是否能正常执行,以确定问题是否与DOM加载有关。 4. 如果有多个库在使用`$`,考虑使用`jQuery.noConflict()`来避免冲突。 通过...

    实现在HTML页面加载完毕后运行js方法.docx

    `window.onload` 事件和 `$(document).ready()` 方法的主要区别在于执行的时机。`window.onload` 事件是在页面中的所有元素都已经加载完毕后触发的,而 `$(document).ready()` 方法是在 DOM 加载完毕后执行的,虽然...

    jquery $(document).ready()和[removed]的区别浅析

    两者的用法在很多情况下非常相似,但它们之间也存在一些关键的区别,以下就是$(document).ready()和window.onload的区别浅析。 1. 执行时间上的区别 $(document).ready()方法仅需要DOM元素全部加载完成即可执行,这...

    浅析document.ready和[removed]的区别讲解

    本文将深入探讨`document.ready`和`window.onload`这两个事件的区别。 `document.ready`是jQuery库提供的一种方法,它的全称是`$(document).ready()`,它的主要作用是在DOM结构构建完成,但图像或其他资源可能尚未...

    jQuery之$(document).ready()使用介绍

    与window.onload的区别 $(document).ready()不同于window.onload。window.onload是在整个页面(包括所有的依赖资源如图片、样式表等)加载完成后才会执行。它更适合用于执行依赖于外部资源完全加载的任务,例如计算...

    $(document)

    `$(document).ready(function(){ })` 与 `window.onload` 都可以用来等待页面加载完成后再执行特定的脚本,但它们之间存在明显的区别: - **`$(document).ready(function(){ })`**:仅在DOM加载完成后立即执行,...

    js 某个页面监听事件渲染完毕的时间.pdf

    本文将深入探讨如何使用JavaScript来监听页面渲染完成的时间,并对比两种常见方法:`window.onload`和jQuery的`$(document).ready`。 首先,我们来看`window.onload`事件。这个事件会在页面中所有的资源,包括HTML...

    onload和jquery运行顺序

    window.onload = function () { console.log('window.onload 方式执行') } $(document).ready(function () { console.log('$(document).ready(function(){}) 方式执行') })

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

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

    Jqyery中同等与js中windows.onload的应用

    关于在页面中放置脚本,将DOM操作的代码放在 `window.onload` 或 jQuery 的 `document ready` 事件中,可以确保元素在执行相关操作时已经存在。例如,下面的代码绑定了按钮点击事件: ```html &lt;div id="divInfo"&gt;...

    全面解析jQuery $(document).ready()和JavaScript onload事件

    在描述中提到,$(document).ready()仅执行一次,并且它和JavaScript的onload事件有着本质的区别。$(document).ready()只关注DOM元素是否已加载,而不是整个页面所有资源都加载完毕。这个方法非常适合用来初始化页面...

    jQuery中的ready函数与[removed]谁先执行

    本文将深入探讨jQuery中的`$(document).ready()`函数与`window.onload`事件的区别,并解析它们各自的执行时机。 首先,我们来看`$(document).ready()`,这是jQuery提供的一种方法,用于在文档对象模型(DOM)准备...

    [removed]和$(function(){})的区别介绍

    jQuery库将window.onload和DOM加载分离,window.onload仍然表示所有资源完全加载完成后触发,而$(document).ready()则只针对DOM结构加载完成时触发,通常来说会比window.onload更早执行。$(function(){})是$...

Global site tag (gtag.js) - Google Analytics