Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

preloading a CSS image #2994

Open
Zhang-Junzhi opened this issue Aug 6, 2018 · 8 comments
Open

preloading a CSS image #2994

Zhang-Junzhi opened this issue Aug 6, 2018 · 8 comments
Labels
css-values-5 topic: urls Tracking issues that'll need edits when CSS URLs are defined on top of Fetch.

Comments

@Zhang-Junzhi
Copy link
Contributor

Zhang-Junzhi commented Aug 6, 2018 •
edited
Loading

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
Copy link
Member

upsuper commented Aug 7, 2018

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

@tabatkins
Copy link
Member

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

@tabatkins tabatkins added the css-values-4 Current Work label Aug 7, 2018
@Zhang-Junzhi
Copy link
Contributor Author

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

@inoas
Copy link

inoas commented Aug 7, 2018

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
Copy link
Contributor Author

Zhang-Junzhi commented Aug 7, 2018 •
edited
Loading

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
Copy link
Contributor

Malvoz commented Aug 7, 2018 •
edited
Loading

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
Copy link
Contributor Author

Zhang-Junzhi commented Aug 8, 2018 •
edited
Loading

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 AmeliaBR mentioned this issue Feb 19, 2019
Open
@AmeliaBR
Copy link
Contributor

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.

@AmeliaBR AmeliaBR mentioned this issue Feb 19, 2019
Open
@fantasai fantasai added css-values-5 topic: urls Tracking issues that'll need edits when CSS URLs are defined on top of Fetch. labels Sep 23, 2021
@fantasai fantasai removed the css-values-4 Current Work label Oct 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-values-5 topic: urls Tracking issues that'll need edits when CSS URLs are defined on top of Fetch.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@upsuper @tabatkins @fantasai @AmeliaBR @inoas @Malvoz @Zhang-Junzhi