Proposal: ::loading and ::loaded state

Today I used the following snippet to avoid alt text flashes in Firefox when an image is not yet loaded:

img:-moz-loading {
  visibility: hidden;
}

I know it’s non-standard, but it had me thinking about a wider application of this.

::loading Allow CSS access to this state to style loading in progress. For example, show a spinner, particular background color, etc.

::loaded Allow CSS access to this state to smoothly render an image, for example a fade-in. The way images currently render in a browser is sometimes brutal: flashy pixel dumps, blocks of lines rendering, it’s not as polished as typically experienced in a native app.

The above use cases currently require JS. Which takes time to download, parse and execute. Time in which the image may actually already be there.

Wouldn’t it be useful to have this capability in CSS?

Related discussions:

• Is an interlaced PNG loaded, loading, both or neither when only half its lines are shown yet?
• Is an animated PNG loaded, loading, both or neither when only its still frame (either 0th or 1st) can be shown yet?
• Is a progressive JPEG loaded, loading, both or neither while its best quality variant cannot be rendered yet?
• Is a JPEG loaded, loading, both or neither while only its embedded preview thumbnail can be rendered?

Thanks for that! Seems to be some interest out there.

Good questions. With “loaded” in my context I was referring to loaded over the network, regardless of whether it is rendered.

Note that CSS uses two colons for pseudo-elements and a single colon for pseudo-classes. A state is the latter, so it would be :loading and :loaded.