Support document's readyState individually

[134130]

Abstract

• A document has these ready states
  • loading
    • The document is loading.
  • interactive
    • The document has finished loading and we can access DOM elements.
    • Sub-resources such as scripts, images, stylesheets and frames are still loading.
  • complete
    • The page is fully loaded.

Currently, element-ready is checking is DOM loaded like below.

const isDomReady = target =>
	['interactive', 'complete'].includes((target.ownerDocument || target).readyState);

But if we need or want to check some elements which generated with script, We cannot use element-ready.

Suggestion

• Support DOM reasource ready and Full page loading individually

from refined-github/refined-github#6837 (comment)

[sindresorhus]

I'm open to adding an option for this. Any suggestion for what it should be called?

[134130]

I think these two are available
waitSubResources?: boolean, waitFullLoaded?: boolean

[sindresorhus]

I would go with waitUntilFullyLoaded.

[fregante]

The DOM is presumably complete when it reaches the interactive state, so the element either exists or it doesn't. Expecting sub-resources (JavaScript) to alter the page specifically between interactive and complete is certain to cause race conditions.

If you need to wait for an element added at some stage after DOMContentLoaded, just use stopOnDomReady: false and implement your own logic based on your expectation of when the element is supposed to appear exactly.

In the linked example, this was indeed resolved without changes to elementReady