window.onload vs $(document).ready()

时间:2010-09-13 06:24:53

标签: javascript jquery javascript-events unobtrusive-javascript

JavaScript的window.onload和jQuery的$(document).ready()方法有什么区别?

17 个答案:

答案 0 :(得分:1174)

加载HTML文档后发生ready事件,而加载所有内容(例如图片)后,onload事件发生。

onload事件是DOM中的标准事件,而ready事件特定于jQuery。 ready事件的目的是在文档加载后尽可能早地发生,以便为页面中的元素添加功能的代码不必等待加载所有内容。 / p>

答案 1 :(得分:130)

window.onload是内置的JavaScript事件,但由于其实现在浏览器中有微妙的怪癖(Firefox,Internet Explorer 6,Internet Explorer 8和Opera) ,jQuery提供document.ready,它将这些摘要抽象出来,并在页面的DOM准备就绪后立即触发(不等待图像等)。

$(document).ready(请注意, document.ready,这是未定义的)是一个jQuery函数,包含并为以下事件提供一致性

  • document.ondomcontentready / document.ondomcontentloaded - 一个新的事件,在文档的DOM加载时触发(可能需要一段时间之前加载图像等);再次,在Internet Explorer和世界其他地方略有不同
  • window.onload(甚至在旧浏览器中实现),在整个页面加载时会触发(图像,样式等)

答案 2 :(得分:85)

$(document).ready()是一个jQuery事件。一旦DOM准备好就会调用JQuery的$(document).ready()方法(这意味着浏览器已经解析了HTML并构建了DOM树)。这使您可以在文档准备好被操作后立即运行代码。

例如,如果浏览器支持DOMContentLoaded事件(就像许多非IE浏览器那样),那么它将触发该事件。 (请注意,DOMContentLoaded事件仅在IE9 +中添加到IE中。)

可以使用两种语法:

$( document ).ready(function() {
   console.log( "ready!" );
});

或速记版本:

$(function() {
   console.log( "ready!" );
});

$(document).ready()的要点:

  • 不会等待加载图像。
  • 用于在DOM完全加载时执行JavaScript。把事件处理程序放在这里。
  • 可以多次使用。
  • 当您收到“$未定义”时,将$替换为jQuery
  • 如果您想操纵图像,则不使用。请改用$(window).load()

window.onload()是本机JavaScript函数。加载页面上的所有内容时会触发window.onload()事件,包括DOM(文档对象模型),横幅广告和图片。两者之间的另一个区别是,虽然我们可以有多个$(document).ready()函数,但我们只能有一个onload函数。

答案 3 :(得分:41)

当页面上的所有内容完全加载时, Windows加载事件会触发,包括DOM(文档对象模型)内容和异步JavaScript 框架和图片即可。你也可以使用body onload =。两者都是一样的; window.onload = function(){}<body onload="func();">是使用同一事件的不同方式。

jQuery $document.ready 函数事件比window.onload早一点执行,并在您的页面上加载DOM(文档对象模型)后调用。它不会等待图像,帧完全加载

取自以下文章: how $document.ready() is different from window.onload()

答案 4 :(得分:22)

关于在Internet Explorer中使用$(document).ready()的注意事项。如果在加载整个文档之前中断了HTTP请求(例如,当页面流式传输到浏览器时,单击另一个链接)IE将触发$(document).ready事件。

如果$(document).ready()事件中的任何代码引用了DOM对象,则可能无法找到这些对象,并且可能发生Javascript错误。保护对这些对象的引用,或将引用这些对象的代码推迟到window.load事件。

我无法在其他浏览器(特别是Chrome和Firefox)中重现此问题

答案 5 :(得分:20)

$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

答案 6 :(得分:16)

活动

$(document).on('ready', handler)从jQuery绑定到ready事件。加载DOM时,处理程序称为 。像图片这样的资产可能仍然缺失。如果文档在绑定时已准备就绪,则永远不会调用它。 jQuery使用DOMContentLoaded - 事件,如果不可用则模拟它。

$(document).on('load', handler)是从服务器加载所有资源后将触发的事件。现在加载图像。虽然onload是原始HTML事件,但ready是由jQuery构建的。

功能

$(document).ready(handler)实际上是promise如果在调用时文档已准备好,将立即调用处理程序。否则它将绑定到ready - 事件。​​

Before jQuery 1.8$(document).load(handler)作为$(document).on('load',handler)的别名存在。

进一步阅读

答案 7 :(得分:13)

一个小提示:

始终使用window.addEventListener将事件添加到窗口。因为这样您可以在不同的事件处理程序中执行代码。

正确的代码:

window.addEventListener('load', function () {
  alert('Hello!')
})

window.addEventListener('load', function () {
  alert('Bye!')
})

无效代码:

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!') 
}

这是因为onload只是对象的属性,被覆盖了。

addEventListener类似,最好使用$(document).ready()而不是onload。

答案 8 :(得分:12)

window.onload: 正常的JavaScript事件。

document.ready: 加载整个HTML时的特定jQuery事件。

答案 9 :(得分:12)

$(document).ready()是一个 jQuery 事件,当HTML文档已完全加载时发生,而window.onload事件发生在以后,当包含图像的所有页面都加载时

window.onload也是DOM中的纯javascript事件,而$(document).ready()事件是jQuery中的一个方法。

$(document).ready()通常是jQuery的包装器,以确保所有加载的元素都在jQuery中使用...

查看jQuery源代码以了解它是如何工作的:

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        readyList = jQuery.Deferred();

        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );

        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );

            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;

            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}

            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {

                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }

                        // detach all dom ready events
                        detach();

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

此外,我创建了以下图片作为两者的快速参考:

enter image description here

答案 10 :(得分:11)

Document.ready(一个jQuery事件)将在所有元素到位时触发,并且可以在JavaScript代码中引用它们,但不一定要加载内容。 <{1}}在加载HTML文档时执行。

Document.ready

然而,$(document).ready(function() { // Code to be executed alert("Document is ready"); }); 将等待页面完全加载。这包括内框,图像等。

window.load

答案 11 :(得分:10)

要记住的一件事(或者我应该回忆一下)是你不能像onload一样堆叠ready。换句话说,jQuery magic允许同一页面上有多个ready,但您无法使用onload执行此操作。

最后onload将取代之前的任何onload

处理这个问题的好方法是使用一个显然由Simon Willison编写并在 Using Multiple JavaScript Onload Functions 中描述的函数。

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});

答案 12 :(得分:4)

在加载HTML文档时会发生document.ready事件,并且在加载了所有内容(图像等)后,window.onload事件总是会发生。

如果你想干预&#34;早期&#34;你可以使用document.ready事件。在渲染过程中,无需等待图像加载。 如果您需要在脚本之前准备好图像(或任何其他内容&#34;),并且需要等待window.onload

例如,如果您正在实施&#34;幻灯片放映&#34;模式,您需要根据图像大小执行计算,您可能要等到window.onload。否则,您可能会遇到一些随机问题,具体取决于图像的加载速度。您的脚本将与加载图像的线程同时运行。如果您的脚本足够长,或者服务器足够快,您可能不会注意到问题,如果图像恰好及时到达。但最安全的做法是允许图像加载。

document.ready可能是一个很好的事件,你可以展示一些&#34; loading ...&#34;签署给用户,并在window.onload,您可以完成任何需要加载资源的脚本,然后最终删除&#34;加载...&#34;登录。

示例: -

// document ready events
$(document).ready(function(){
     alert("document is ready..");
})

// using JQuery
$(function(){
   alert("document is ready..");
})

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;

答案 13 :(得分:2)

window.onload是一个JavaScript内置函数。加载HTML页面时会触发window.onloadwindow.onload只能写一次。

document.ready是jQuery库的一个功能。当HTML和HTML文件中包含的所有JavaScript代码,CSS和图像被完全加载时,document.ready会触发。 document.ready可以根据要求多次编写。

答案 14 :(得分:1)

当您说$(document).ready(f)时,您告诉脚本引擎执行以下操作:

  1. 获取对象文档并推送它,因为它不在本地范围内,它必须进行哈希表查找以查找文档的位置,幸运的是文档是全局绑定的,因此它是单个查找。
  2. 找到对象$并选择它,因为它不在本地范围内,它必须进行哈希表查找,这可能会也可能不会发生冲突。
  3. 在全局范围内找到对象f,这是另一个哈希表查找或推送函数对象并初始化它。
  4. 调用所选对象的ready,其中包含另一个哈希表查找所选对象以查找方法并调用它。
  5. 进行。
  6. 在最好的情况下,这是2个哈希表查找,但是这忽略了jQuery所做的繁重工作,其中$是jQuery所有可能输入的厨房接收器,所以另一个映射是可能会将查询分派给正确的处理程序。

    或者,你可以这样做:

    window.onload = function() {...}
    

    1. 在全局范围内找到对象窗口,如果JavaScript被优化,它将知道由于窗口没有被更改,它已经是所选对象,所以不需要做任何事情。
    2. 函数对象被推到操作数堆栈上。
    3. 通过执行哈希表查找来检查onload是否是属性,因为它是,它被称为函数。
    4. 在最好的情况下,这会花费单个哈希表查找,这是必要的,因为必须提取onload

      理想情况下,jQuery会将查询编译为字符串,这些字符串可以粘贴以执行您希望jQuery执行的操作,但不需要运行时调度jQuery。这样你就可以选择

      1. 像我们今天一样动态调度jquery。
      2. 让jQuery将您的查询编译为纯JavaScript字符串,该字符串可以传递给eval以执行您想要的操作。
      3. 将结果2直接复制到您的代码中,并跳过eval
      4. 的费用

答案 15 :(得分:0)

window.onload由DOM api提供,它说“在加载给定资源时触发load事件。”

“加载事件在文档加载过程结束时触发。这时,文档中的所有对象都在DOM中,并且所有图像,脚本,链接和子帧已完成加载。” DOM onload

但是在jQuery中,$(document).ready()仅在页面文档对象模型(DOM)准备好可以执行JavaScript代码时运行。其中不包括图片,脚本,iframe等。jquery ready event

因此jquery ready方法将比dom onload事件更早运行。

答案 16 :(得分:0)

时光飞逝,现在是 ECMAScript 2021,IE11 被越来越少的人使用。相比之下,最多的两个事件是 loadDOMContentLoaded

DOMContentLoaded初始 HTML 文档完全加载和解析后触发。

loadDOMContentLoaded 和整个页面加载后触发, 等待所有依赖资源完成加载。资源示例:脚本、样式表、图像和 iframe 等。

<块引用>

重要提示:同步脚本将暂停解析 DOM。

这两个事件都可以用来判断DOM是否可以使用。例如:

<script>
    // DOM hasn't been completely parsed
    document.body; // null

    document.addEventListener('DOMContentLoaded', () => {
        // Now safely manipulate DOM
        document.querySelector('#id');
        document.body.appendChild();
    });

    /**
     * Should be used only to detect a fully-loaded page.
     * 
     * If you just want to manipulate DOM safely, `DOMContentLoaded` is better.
     */
    window.addEventListener('load', () => {
        // Safely manipulate DOM too
        document.links;
    });
</script>