Description
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');
};
}