DOMContentLoaded

From GreaseSpot Wiki
Jump to: navigation, search


Description

The code in a Greasemonkey user script gets invoked when the DOMContentLoaded event fires (during event capture as of GM 0.8.6). It is a DOM event implemented by Mozilla, similar to window.onload. However, since it waits only for the DOM to load, instead of the entire page (including images, style sheets, and etc.) it happens sooner.

The DOMContentLoaded event does not fire for non-text content types such as images.

Other user script managers may behave differently. See Cross-browser userscripting for more details.

Flicker

Although it happens sooner than the Load event (onload), there is still a delay between when the page starts loading and when this event fires. This delay is the amount of time that it takes for the HTML content of the page itself to load.

Greasemonkey injects user scripts at DOMContentLoaded time. Thus, there is a period of time when the page is loading, and may be showing on screen, before Greasemonkey has injected into the page. This delay is often known as flicker, where the page appears to load, then changes after a (usually) short delay.

Workaround

Write your script to @run-at document-start and immediately hide display of the page via CSS. Let the page continue loading, let your script run through addEventListener('DOMContentLoaded', function, false); then re-enable display of the page.