Proposal for image placeholder

בע"ה

Hello,


I propose to implement a placeholder for img element (maybe also for
iframe?). Apply all CSS background properties for placeholder in order to
make it customizable as more as possible.

background: color position size repeat origin clip attachment image;
placeholder: color position size repeat origin clip attachment image;

High priority need for placeholder is for resource priorities
http://www.w3.org/TR/resource-priorities/. And since resource-priorities
applies also to background-image, background is not a solution for
placeholder. That means there is a need for new property like "placeholder".

Proposal examples:
placeholder: cover no-repeat url(data:image/webp;base64,...);
placeholder: #ddd linear-gradient(rgba(255,255,255,0), #ffff);


The placeholder must be replaced with image after the full image load. Let
to apply CSS transition for the moment of replacement.
Apply also resource priorities for placeholder-image if set - let developer
to decide the use case. In real life example the small size cached image
could be used in placeholder-image and big image in background-image.


Binyamin

Received on Monday, 6 January 2014 18:45:13 UTC