Skip to content

API consistency: new interface with a .complete property (the same as with <img>.complete), for all elements that load content. #11145

Open
@trusktr

Description

@trusktr

What problem are you trying to solve?

There is currently inconsistency in how to detect if an element has loaded its content, depending on what type of element we have.

For example, how do you detect if a <link> element has already loaded a style sheet?

What solutions exist today?

With <img> we can look at the .complete property:

const image = document.querySelector('img')

if (image.complete) {
  console.log('Image is already loaded');
} else {
  image.onload = () => {
    console.log('Image has loaded');
  };
}

How would you solve it?

It seems like for sake of consistency in DOM APIs, we should include the .complete property on all other elements that fire load events, f.e. <link>.

We can do this by organizing the .complete into to a new separate interface that all loading elements implement, f.e. maybe it is named LoadableElement or similar. This new interface would apply to <link>, <script>, <img>, and any other element that loads content and fires a load event.

I think this is backwards compatible.

Anything else?

While we're at it, we may as well make it easy to detect loading state changes for all loading elements too. For example, maybe these elements should also emit loadstart events like Media elements do, and have isLoading or similar properties.

This is an opportunity to create consistency in DOM element loading APIs across all elements that fire load events as ell as Media elements that have additional loadstart events, etc.

Ideally, there'd be a consistent way to observe loading state of any lodable element regardless if it loads a whole thing (such as an image) or piece of a thing over time (such as a video).

Inconsistent workarounds

For the <link> element, we can do this to achieve something similar to <img> elements:

const link = document.querySelector('link')
const linkComplete = link.sheet?.cssRules.length

if (linkComplete) {
  console.log('Link stylesheet is already loaded');
} else {
  link.onload = () => {
    console.log('Link stylesheet has loaded');
  };
}

With consistency we could do this:

const el = document.querySelector('link, img, script, etc')

if (el.complete) {
  console.log('Element is already loaded');
} else {
  el.onload = () => {
    console.log('Element has loaded');
  };
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    addition/proposalNew features or enhancementsneeds implementer interestMoving the issue forward requires implementers to express interest

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions