DOMstate

This article is a work in progress. Some or most of it is still evolving and you should expect some level of inaccuracy.

What is DOMstate?

Domstate is a small javascript library exposing various states of the document, heavily inspired by the readyState API. When a state is triggered, an event will fire and the state is added to the body of the document (or else) in a data attribute, allowing you to use those states for effects and timing. Each state can be delayed for timing control and adjusted to compensate for prolonged loading time caused by outside events (like a bad network connection).

While the core only gives you 2 states (interactive, complete) and events (ready, interactive, complete), extensions can be easily added to create more states. The package comes with 2 of those. Domstate-link, adding the various navigation based states, and domstate-img, adding a complete state to img tags.

The included CSS tries mimic a native app while smoothing the whole "website" experience.

Core

Events

  • domstateReady
  • domstateInteractive
  • domstateComplete

Selectors

  • body[data-domstate="loading"]
  • body[data-domstate="interactive"]
  • body[data-domstate="complete"]

domstate-img

Selector

  • img[data-domstate="complete"]

domstate-link

Events

  • domstateNavigating
  • domstateNavigatingForward
  • domstateNavigatingBackward

Selector

  • body[data-domstate="navigating"]
  • body[data-domstate="navigating-forward"]
  • body[data-domstate="navigating-backward"]

Extending domstate

todo

This article is a work in progress. Some or most of it is still evolving and you should expect some level of inaccuracy.

What is DOMstate?

Domstate is a small javascript library exposing various states of the document, heavily inspired by the readyState API. When a state is triggered, an event will fire and the state is added to the body of the document (or else) in a data attribute, allowing you to use those states for effects and timing. Each state can be delayed for timing control and adjusted to compensate for prolonged loading time caused by outside events (like a bad network connection).

While the core only gives you 2 states (interactive, complete) and events (ready, interactive, complete), extensions can be easily added to create more states. The package comes with 2 of those. Domstate-link, adding the various navigation based states, and domstate-img, adding a complete state to img tags.

The included CSS tries mimic a native app while smoothing the whole "website" experience.

Core

Events

  • domstateReady
  • domstateInteractive
  • domstateComplete

Selectors

  • body[data-domstate="loading"]
  • body[data-domstate="interactive"]
  • body[data-domstate="complete"]

domstate-img

Selector

  • img[data-domstate="complete"]

domstate-link

Events

  • domstateNavigating
  • domstateNavigatingForward
  • domstateNavigatingBackward

Selector

  • body[data-domstate="navigating"]
  • body[data-domstate="navigating-forward"]
  • body[data-domstate="navigating-backward"]

Extending domstate

todo

🥰
Welcome back!

👋
You've been logged out.