Open Zhang-Junzhi opened 6 years ago
Maybe a <url-modifier>
can be defined to do this.
Yeah, that's probably the most reasonable way to target this.
Thanks for your opinions. I love the idea. Maybe speical cases like url(attr(...)) needs to be treated specially.
Could there be made a distinction between preload (high priority, before regular requests), load (with regular requests) and prefetch (low priority, after regular requests)?
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).
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.
Good job! Thank you very much for the information.
So, things can be simplified if we can delegate priority part to Priority Hints.
All remaining work that needs to do is to define a url-modifier for preloading.
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.
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):
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.