window.onload vs $(document).ready() |
您所在的位置：网站首页 › onload和ready › window.onload vs $(document).ready() |
|
JavaScript window.onload和jQuery的$(document).ready()方法有什么区别？ 问题回答在readyHTML文档加载后发生的事件,而该onload事件时,所有内容(例如图像)也已经被加载后发生. 该onload事件是DOM中的标准事件,而ready事件特定于jQuery.ready事件的目的是它应该在文档加载后尽早发生,以便为页面中的元素添加功能的代码不必等待加载所有内容. 问题回答window.onload是内置的JavaScript事件,但由于它的实现在浏览器(Firefox,Internet Explorer 6,Internet Explorer 8和Opera)中有微妙的怪癖,jQuery提供了抽象的东西,并在页面的DOM准备好后立即触发(不等待图像等).document.ready $(document).ready(请注意,它不是document.ready,未定义)是一个jQuery函数,包装并提供以下事件的一致性: document.ondomcontentready/ document.ondomcontentloaded- 加载文档的DOM时可能会触发的新事件(可能是在加载图像等之前的某个时间); 再次,在Internet Explorer和世界其他地方略有不同和window.onload(甚至在旧浏览器中实现),在整个页面加载时触发(图像,样式等)问题回答$(document).ready()是一个jQuery事件.$(document).ready()一旦DOM准备好就会调用JQuery的方法(这意味着浏览器已经解析了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函数. 问题回答一个Windows负载事件触发时,所有的页面上的内容满载包括DOM(文档对象模型)的内容和异步的JavaScript,框架和图像.你也可以使用body onload =.两者都是一样的; window.onload = function(){}并且是使用相同事件的不同方式. jQuery$document.ready函数事件比window.onload页面上加载DOM(Document对象模型)一样早一点执行并调用.它不会等待图像,帧完全加载. 摘自以下文章: 有何$document.ready()不同之处window.onload() 问题回答使用$(document).ready()Internet Explorer时要小心谨慎.如果在加载整个文档之前HTTP请求被中断(例如,当页面流式传输到浏览器时,单击另一个链接)IE将触发该$(document).ready事件. 如果$(document).ready()事件中的任何代码引用DOM对象,则可能无法找到这些对象,并且可能发生Javascript错误.保护对这些对象的引用,或将引用这些对象的代码推迟到window.load事件. 我无法在其他浏览器(特别是Chrome和Firefox)中重现此问题 问题回答$(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"); }); 问题回答小提示:始终使用window.addEventListener向窗口添加事件.因为这样,您可以在不同的事件处理程序中执行代码. 正确的代码: window.addEventListener('load', function () { alert('Hello!') }) window.addEventListener('load', function () { alert('Bye!') }) 问题回答活动$(document).on('ready', handler)从jQuery绑定到ready事件.加载DOM时调用处理程序.像图像这样的资产可能仍然缺失.如果文档在绑定时已准备就绪,则永远不会调用它.jQuery使用DOMContentLoaded-Event,如果不可用则模拟它. $(document).on('load', handler)是从服务器加载所有资源后将触发的事件.现在加载图像.虽然onload事件是原始的HTML事件,准备由jQuery的建立. 功能$(document).ready(handler)实际上是一个承诺.如果在调用时文档准备就绪,将立即调用处理程序.否则它会绑定到ready-Event. 在jQuery 1.8之前,$(document).load(handler)作为别名存在$(document).on('load',handler). 进一步阅读时机在功能准备好了一个例子承诺已删除的事件别名问题回答这$(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; };另外,我创建了下面的图像作为两者的快速参考: 问题回答window.onload:一个普通的JavaScript事件. document.ready:加载整个HTML时的特定jQuery事件. 问题回答要记住的一件事(或者我应该回忆一下)是你不能onload像你一样堆叠ready.换句话说,jQuery magic允许ready在同一页面上使用多个s,但是你不能这样做onload. 最后一个onload将否决任何先前的onloads. 一个很好的处理方法是使用一个显然由Simon Willison编写的函数,并在使用多个JavaScript上载函数中进行了描述. 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 */ }); 问题回答Document.ready(一个jQuery事件)将在所有元素到位时触发,并且可以在JavaScript代码中引用它们,但不必加载内容.Document.ready加载HTML文档时执行. $(document).ready(function() { // Code to be executed alert("Document is ready"); });该window.load然而,将等待页面被完全加载.这包括内框,图像等. $(window).load(function() { //Fires when the page is loaded completely alert("window is loaded"); }); 问题回答加载HTML文档时，将发生document.ready事件，而在加载window.onload所有内容（图像等）后，该事件将始终在以后发生。 document.ready如果您想在渲染过程中“尽早”介入，而不必等待图像加载，则可以使用该事件。如果在脚本“执行某些操作”之前需要准备好图像（或其他“内容”），则需要等到window.onload。 例如，如果要实现“幻灯片放映”模式，并且需要根据图像尺寸执行计算，则可能要等到window.onload。否则，您可能会遇到一些随机问题，具体取决于图像加载的速度。您的脚本将与加载图像的线程同时运行。如果您的脚本足够长，或者服务器足够快，那么如果图像恰好及时到达，您可能不会注意到问题。但是最安全的做法是允许加载图像。 document.ready对于您来说向用户显示“正在加载...”符号可能是一个不错的事件，然后window.onload，您就可以完成需要加载资源的所有脚本，然后最终删除“正在加载...”符号。 例子 ：- // 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; 问题回答时光荏苒，现在是 ECMAScript 2021，IE11 被越来越少的人使用。相比之下，最多的两个事件是load和DOMContentLoaded。 DOMContentLoaded在初始HTML 文档完全加载和解析后触发。 loadDOMContentLoaded在整个页面加载 完毕后触发，等待所有相关资源完成加载。资源示例：脚本、样式表、图像和 iframe 等。 重要提示：同步脚本将暂停 DOM 解析。 这两个事件都可以用来确定 DOM 是否可以使用。举些例子： // DOM hasn't been completely parsed document.body; // null window.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; }); 本文标题： window.onload vs $(document).ready() 本文网址： https://www.aigwa.com/cms/Content/detail/1003.html 本文标签： unobtrusive-javascriptdom-eventsjqueryjavascript |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |