- From: Andrew Fedoniouk <news@terrainformatica.com>
- Date: Fri, 17 Jan 2014 20:16:01 -0800
- To: Brad Kemper <brad.kemper@gmail.com>
- Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, Binyamin <7raivis@inbox.lv>, www-style list <www-style@w3.org>
On Fri, Jan 17, 2014 at 3:34 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>
>
>> On Jan 17, 2014, at 11:30 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>>
>>> 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".
>>
>> What is the placeholder for? Why don't resource priorities apply to
>> the placeholder image as well?
>>
>> ~TJ
>>
>
> Maybe something like this:
>
> img.big {
> width: 1200px;
> height: 1200px;
> }
> img.big:not-loaded {
> content: "chill, while we load this image";
> border: 2px solid red;
> display: table-cell;
> vertical-align: middle;
> color: white;
> background-color: #444;
> }
I've found that there is a need for two state flags (a.k.a. pseudo-classes)
in practice:
:busy - element (e.g. img, object, frame, etc.) is loading its data - has
pending data delivery requests
:incomplete - data delivery request has failed, e.g. no image on that URL.
Having these we can define the following:
img:busy { background-image: url(that-spinning-thing.gif); }
img:incomplete:not(:busy) : { background-image: url(no-image-placeholder.gif); }
My 2 sciter coins.
--
Andrew Fedoniouk.
http://terrainformatica.com
Received on Saturday, 18 January 2014 04:16:29 UTC