search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.46k stars 657 forks source link

[selectors] Pseudo-classes for image state #3134

Open whileloopa opened 6 years ago

whileloopa commented 6 years ago

I propose to add pseudo-classes for image state. img:loading -- sending request to server img:partial -- image partially loaded img:complete -- image completely loaded img:broken -- image src link is broken

Zhang-Junzhi commented 6 years ago

Similar discussions can be seen at #656 .

In the last comment, I proposed to generalise the issue to all elements instead of only image elements, such as script, style, etc. Because I'd like to see a fallback mechanism enabled for giving users with some friendly hints about the current load status of various external resources.

eeeps commented 3 years ago

Use case for this:

I'm trying to implement low-quality image placeholders in a nice, progressively enhanced way. My idea: put the LQIP in a background-image, so that we don't need JS to switch out the img srcset/src. This worked great until I used it on an image that contained transparency. It would be nice to be able to switch the background/preview off, after the image had loaded, using just CSS.

Another common LQIP pattern that would benefit from this: blurring the preview image but not the full-quality image.

For progressive images, it would be nice to know whether or not the initial image scans have been painted. I don't think :partial will do this. Perhaps we need another value, :painted?

Also does :loaded actually mean decoded (or perhaps, completely painted)? The distinction seems important in instances where <img decode="async">.

emilio commented 3 years ago

There's some interesting use-cases for these like fading in lazy-loaded images (https://bugzilla.mozilla.org/show_bug.cgi?id=1713512 for example).