search

w3c / csswg-drafts

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

preloading a CSS image #2994

Open Zhang-Junzhi opened 6 years ago

Zhang-Junzhi commented 6 years ago

For now, we seem to have to do something hacky if we want to preload a image for use as a CSS image later. Despite hacky workarounds requiring script or document code invovled, there are some pure CSS wordarounds(like the following example):

body::before
{
    content: url(foo-bg.png) url(bar-bg.png) url(other-bg1.png) url(other-bg2.png);
    position: absolute;
    height: 0px;
    width: 0px;
    overflow: hidden;
    z-index: -1;
}

#foo:hover
{
    background: url(foo-bg.png);
    ...
}

...

It seems preloading a CSS image is "prefectly" resolved via pure CSS, however, these pure CSS methods look very counter-intuitive, lengthy and maintenance-invovling, and even further, they aren't just theoretically garanteed to be correct(though they work in most of broswers in the real world).

I'd really like to see a native CSS feature that explictly designates preloading of images.

Any ideas on this issue? I'm looking forward to hearing from you.

upsuper commented 6 years ago

Maybe a <url-modifier> can be defined to do this.

tabatkins commented 6 years ago

Yeah, that's probably the most reasonable way to target this.

Zhang-Junzhi commented 6 years ago

Thanks for your opinions. I love the idea. Maybe speical cases like url(attr(...)) needs to be treated specially.

inoas commented 6 years ago

Could there be made a distinction between preload (high priority, before regular requests), load (with regular requests) and prefetch (low priority, after regular requests)?

Zhang-Junzhi commented 6 years ago

Thanks for the reply. @inoas

To further break down image loading priorities, images with load priority can be devided into different sub-priorities.

For example,

<style>
body
{
    background: url(page-bg.png);
}

#page-loading-progress::before
{
    background: url(spinning-circle.png) ... no-repeat;
    ...
}
</style>
<body>
    <progress id="page-loading-progress">...</progress>
    ...
</body>

Here it's reasonable to prioritise the load for the spinning-circle loading indicator as opposed to the large one that's used in body(though practically browsers tend to load both of the two images in parallel).

Malvoz commented 6 years ago

We have the Priority Hints API for hinting of priorities. But there's no CSS equivalent to the priority hints' importance attribute. It may be that a Priority Hints feature policy can help with this.

Zhang-Junzhi commented 6 years ago

Good job! Thank you very much for the information.

So, things can be simplified if we can delegate priority part to Priority Hints.

Ａll remaining work that needs to do is to define a url-modifier for preloading.

AmeliaBR commented 5 years ago

Related: #1603 on crossorigin modifier and #2095 on async modifier. We should probably address them all at the same time to get consistent syntax and implementation guidelines.