rel=preload support? #112
Comments
|
You might want to consider something like this: https://gist.github.com/aFarkas/34dde117000ec7075053 Note: This was just a POC. For adding better support something like MutationObserver would be needed. No polyfill can reproduce the performance characteristics of the native implementation. |
|
I have no problem supporting this feature with a polyfill, since there are already multiple interoperable implementations in different browsers. However I think the concern here is more one of practicality: loadCSS's solution requires loading their library as well as the Polyfill, and that will pollute the global scope as well as potentially interfering with sites that use a different version of loadCSS themselves. We would have to encapsulate our copy of loadCSS as a private dependency. The alternative suggested by @aFarkas looks like a promising starting point, but as he points out, it does not handle tags added after page load, for which we would need a mutation observer. If someone would like to take this further, please do, and we would be very happy to have this polyfill in the project |
|
I will give it a try. |
|
@aFarkas great! Note that we almost have a mutation observer polyfill, but it was failing a test in IE9: polyfillpolyfill/polyfill-service#695. If that's fixed, we can also add MO as a dependency of preload |
|
@triblondon Great to hear this. I have pushed my current work to this link-preload repo. I will need to work on tests and some documentation. Unfortunately, I have probably only time on next Sunday. |
|
Let me know if there's anything I can help with in the |
|
@antoligy Development:
Documentation:
For example: <head>
<script>
if(linkPreloadNotSupported){
document.write('<script src="polyfill.js"( async="")></script>');
}
</script>
<link rel="stylesheet" href="crucial.css" />
<link rel="preload" as="style" href="styles.css" onload="rel='stylesheet';" />
<link rel="preload" as="font" type="woff" href="font.woff" />
<link rel="preload" as="" href="/api/sitedata?homepage.json" />
<script src="app.js"></script>
</head>
<link rel="preload" as="style" data-as="" href="styles.css" onload="rel='stylesheet';" />
<link rel="preload" as="font" data-text="nonLatinText" type="woff" href="icons.woff" />
<link rel="preload" as="font" data-as="font-fetch" type="woff" href="icons.woff" />
|
|
I might have some time in one week to finalize this. But I can't promise yet. |
|
@triblondon |
|
@antoligy |
|
@aFarkas Don't worry, and thanks for your efforts up to this point, they are very much appreciated! |
|
Heya, I stumbled upon this issue as I was trying to figure out if this would polyfill preload. Turns out it doesn't, and from reading the comments it's a somewhat involved process to get all cases to pass. From my understanding it's only CSS that's truly broken if you reference it with preload. By "broken" I mean that it's currently the defacto way of loading stylesheets, and it won't get loaded anyway, later on in the document, the way images and fonts do. So I was wondering: would you be open to a pragmatic patch that more or less just adds the loadCSS library so we can unbreak CSS loading. Keen to hear your thoughts. Thanks! 🙏✨ |
JakeChampion
added
feature
Hey,
@onishiweb mentioned in his talk that LoadCSS have begun recommending that users start using their CSS rel="preload" polyfill. Unfortunately it's still in working draft - Would such a polyfill be welcomed here, or should we wait until it's a little more stable?
The text was updated successfully, but these errors were encountered: