Image Elements Should Expose an HTML Attribute or JS Field on Load Fail/Success

[Thoughtscript]

What problem are you trying to solve?

Hi! I've done a brief scan of existing Issues and didn't see any topic on this matter. (And my apologies if I've overlooked anything or if this has been submitted to the wrong place!)

Request: HTML img Elements lack visibility into the status of an Image Request/Fetch. Although, img Elements display alt Text or some specified background/background-image say, these effects are mostly phenomenological (only apparent to the viewing User) and don't have corresponding handles in Code, the DOM, or available Interfaces.

Specifically exposed through any one or more of the following:

1. Dot notation: my_element.failed
2. my_element.getAttribute('failed)
3. <img class="my_class" loading="lazy" alt="my text" src="my_url" failed="false" />

I'm leaning toward the HTML Attribute here for wider browser support.

Comments

1. In all browsers I've researched (albeit only briefly), there's no inbuilt readily-available programmatic means to detect the present state of the Image src.

2. Some Errors (net::ERR_HTTP2_PROTOCOL_ERROR) appear to sidestep typical error and/or abort handling (e.g - the following won't or won't always correctly catch some kinds of net:: namespaced Events - I'm not sure why but have been testing this repeatedly. Possibly another Issue in its own right.)

   One can presently use a mix of something like:

   const ELS = document.getElementsByClassName('my_class')
   ELS[0].setAttribute('failed', false)

   and:

   ELS[0].addEventListener('error', retryImage)
   ELS[0].addEventListener('load', (e) => {
            const EL = e.currentTarget
            EL.setAttribute('failed', false))
   })
   ELS[0].addEventListener('abort', retryImage)

   • So this functionality is partially supported but not fully out of the box per se and doesn't always correctly
     handle or represent the state of Images that fail to load under heavy Network use (e.g. - the net::ERR_HTTP2_PROTOCOL_ERROR above). The default approach (using the above) is either somewhat unreliable ("finnicky") or is overridden by invisible and idiomatic browser operations.

3. I think there's still merit to this suggestion even if those concerns don't warrant a solution "in-of-themselves".

   • There's no present way to check the status of an Image (that I'm aware of) aside from the Event Listeners (above), a log (which can't be used programmatically), and/or setting a field on the HTML Element (or storing in Memory).
   • I think it's valuable to capture the state of the image independently of an Event Listener operation (particularly if an Event Listener errors out say, is skipped over for whatever idiomatic reason that browser might, etc.).
   • Such a field might support lazy retries and support more flexibility in addressing Images loading (alternative techniques that programmatically update alt, alternatives set through CSS dynamically or not, etc.).
   • Purportedly, it'd simplify the way one would detect and respond to Image Request failures.

4. The JavaScript Field or HTML Attribute could be set somewhere in 4.8.4.3 or thereabouts.

What solutions exist today?

One can presently use a mix of something like:

const ELS = document.getElementsByClassName('my_class')
ELS[0].setAttribute('failed', false)

and:

ELS[0].addEventListener('error', retryImage)
ELS[0].addEventListener('load', (e) => {
     const EL = e.currentTarget
     EL.setAttribute('failed', false))
})
ELS[0].addEventListener('abort', retryImage)

But this approach will occasionally fail to catch certain kinds of failures. In testing: net::ERR_HTTP2_PROTOCOL_ERROR wasn't caught by any of the above in several browser about 50% of the time.

How would you solve it?

The HTML Standard sets any one or more of the following:

1. Dot notation: my_element.failed
2. my_element.getAttribute('failed)
3. <img class="my_class" loading="lazy" alt="my text" src="my_url" failed="false" />

After src is read and used to retrieve an Image (roughly: 4.8.4.3-ish).

Anything else?

No response