Javascript加载vs ready vs domready vs DOMContentLoaded事件 [英] Javascript load vs ready vs domready vs DOMContentLoaded events

问题描述

我在启动事件中有点迷失 - 有很多不同的事件，并且在DOM和各种框架（如jQuery）中命名不同。所有可能的启动事件是什么？他们有什么不同？你能否展示一个简单的时间表来证明这些事件的触发顺序是什么？

解决方案

.ready（）

虽然JavaScript在呈现
页面时提供了执行代码的加载事件，但是在所有资产
这样的情况下才会触发此事件因为图像已被完全接收。在大多数情况下，只要DOM层次结构完全构造为
，就可以运行
脚本。传递给.ready（）的处理程序保证在DOM准备好后执行
，因此这通常是
附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。当使用依赖于CSS样式属性值的
脚本时，在
引用脚本之前引用外部样式表或嵌入样式元素非常重要
。

如果代码依赖于加载的资源（例如，如果需要图像的
维度），则代码应该放在load事件的
处理程序中。 / p>

.ready（）方法通常与属性不兼容。如果必须使用load，则不要使用.ready（）
或使用jQuery的.load（）方法将加载事件处理程序附加到
窗口或更具体的项目，如图像。

参考： http：// api.jquery.com/ready/

.load（）

此方法是.on（load，handler）的快捷方式。

当元素和所有子元素具有元素时，会将事件发送给元素
已完全加载。此事件可以发送到与URL关联的任何元素
：图像，脚本，框架，iframe和
窗口对象。

In一般来说，没有必要等待所有图像完全加载
。如果代码可以更早地执行，通常最好将
放在发送到.ready（）方法的处理程序中。

参考： http://api.jquery.com/load-event/

GlobalEventHandlers.onload

加载事件在文档加载结束时触发处理。在这一点
，文档中的所有对象都在DOM中，并且所有
的图像和子帧都已完成加载。

还有一些Gecko特定的DOM事件，如DOMContentLoaded和
DOMFrameContentLoaded（可以使用
EventTarget.addEventListener（）处理），这些事件是在构建了
页面的DOM之后触发的，但是不要等待其他资源到
完成加载。

跨浏览器回退

Internet Explorer 8支持readystatechange事件，可以使用
来检测DOM是否已准备就绪。在早期版本的Internet
资源管理器中，可以通过定期尝试执行
document.documentElement.doScroll（left）;来检测此状态，因为此代码段将抛出
一个错误，直到DOM准备就绪。

jQuery等通用JS库提供跨浏览器
方法来检测DOM是否准备就绪。还有提供此功能的独立
脚本：contentloaded.js（仅支持一个
侦听器）和jquery.documentReady.js（不依赖于jQuery，尽管名称为
）。参考：
https://developer.mozilla.org /en-US/docs/Web/API/GlobalEventHandlers.onload

代码：

  document.addEventListener（DOMContentLoaded，function（event）{
 console.log（DOM full loaded and parsed）; 
}）; 
 
函数load（）{
 console.log（检测到加载事件！）; 
} 
 window.onload = load; 
 
 $（document）.ready（function（）{
 console.log（'ready'）; 
}）; 
 
 $（窗口）.load（function（）{
 console.log（'loaded'）; 
}）; 
  

时间轴演示： http://jsfiddle.net/HgJ33/

I am a bit lost in the "start up" events - there are so many different events and are named differently in the DOM and in various frameworks like jQuery. What are all possible start up events? How do they differ? Can you show a simple timeline to demonstrate in which order are these events fired?

解决方案

.ready()

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.

Ref: http://api.jquery.com/ready/

.load()

This method is a shortcut for .on( "load", handler ).

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

In general, it is not necessary to wait for all images to be fully loaded. If code can be executed earlier, it is usually best to place it in a handler sent to the .ready() method.

Ref: http://api.jquery.com/load-event/

GlobalEventHandlers.onload

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

There are also Gecko-Specific DOM Events like DOMContentLoaded and DOMFrameContentLoaded (which can be handled using EventTarget.addEventListener()) which are fired after the DOM for the page has been constructed, but do not wait for other resources to finish loading.

Cross-browser fallback

Internet Explorer 8 supports the readystatechange event, which can be used to detect that the DOM is ready. In earlier version of Internet Explorer, this state can be detected by regularily trying to execute document.documentElement.doScroll("left");, as this snippet will throw an error until the DOM is ready.

General-purpose JS libraries such as jQuery offer cross-browser methods to detect that the DOM is ready. There are also standalone scripts that offer this feature : contentloaded.js (supports only one listener) and jquery.documentReady.js (doesn't depend on jQuery, despite its name). Ref: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

Code:

document.addEventListener("DOMContentLoaded", function (event) {
    console.log("DOM fully loaded and parsed");
});

function load() {
    console.log("load event detected!");
}
window.onload = load;

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

$(window).load(function () {
    console.log('loaded');
});

Timeline demo: http://jsfiddle.net/HgJ33/

这篇关于Javascript加载vs ready vs domready vs DOMContentLoaded事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！