Comments (10)
Seems to work alright on 4G ;)
from loadcss.
I suggested earlier in the mail I send you yesterday the xhr method. I understand that we come across browser support complexities. So I understand the polling approach as well. I started thinking and came across http://stackoverflow.com/q/2635814.
So how about polling ss.sheet
? Once it is not null
anymore the stylesheet is loaded and it should be safe to toggle the media back. Tested it and worked on Chrome. With 2 css calls, one for main.css and one for the font.css. Something like below:
function loadCSS( href, before, media ){
"use strict";
// Arguments explained:
// `href` is the URL for your CSS file.
// `before` optionally defines the element we'll use as a reference for injecting our <link>
// By default, `before` uses the first <script> element in the page.
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document.
// If so, pass a different reference element to the `before` argument and it'll insert before that instead
// note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
var ss = window.document.createElement( "link" );
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
var ssLength = window.document.styleSheets.length;
ss.rel = "stylesheet";
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll fetch without blocking render
ss.media = "only x";
// inject link
ref.parentNode.insertBefore( ss, ref );
// This function sets the link's media back to `all` so that the stylesheet applies once it loads
// It is designed to loop until document.styleSheets includes
function toggleMedia(){
if(ss.sheet ){
ss.media = media || "all";
}
else {
setTimeout( toggleMedia );
}
}
toggleMedia();
return ss;
}
In the link I pasted I see some if else, probably because ss.sheet
is not supported everywhere. What do you think?
from loadcss.
Thanks @decrek. I like that, though I'd prefer something that came earlier than when the CSS finishes loading, since that'd be a great deal of polling. Regardless, I like the idea and will be poking at it a bit today.
from loadcss.
Hi all.
I've posted a proposed approach to the issue-19 branch and I wouldn't mind some feedback on it. It basically polls document.styleSheets until the sheet we want is defined in there by its href property. It has a similar result to @decrek's proposal above, but hopefully without the workarounds that the sheet
property would have required (I'm testing this now).
from loadcss.
I tested this again with my insanely throttled connection and works(tested in Chrome) Btw I use Charles for that. Seriously I never been so deep into that cssom thing, so really don't know how that sheet property is supported. So I am curious about your testing results. AFAIK the href property is supported everywhere. I also see that in my proposal I poll until the stylesheet is loaded like you said in your reply and in your latest proposal you poll until it is present in the DOM (and started downloading?). That would be better.
Just for my understanding, the CSS request will not be blocking when it's started and has a non matching media property, right? That would mean that the moment the request is started you can toggle the media property back?
from loadcss.
@decrek yes, that's the case (a non-applicable media type will be downloaded at a lower priority, async, in modern browsers). It seems that the href
property is populated when a stylesheet finishes loading, rather than when it is first requested, which is unfortunate since it will mean more polling. The only approach that I've found so far that allows us to detect the moment the request is made is to check stylesheets.length for an increment, but then we run into issues with multiple loadCSS calls.
This approach seems to work most broadly of those I've tested so far.
from loadcss.
@scottjehl Ah ok, that means the same amount of polling as in my proposal but better support than the sheet property.
from loadcss.
yeah, that’s what I’m thinking at least.
On Oct 24, 2014, at 1:07 PM, Declan Rek [email protected] wrote:
@scottjehl Ah ok, that means the same amount of polling as in my proposal but better support than the sheet property.
—
Reply to this email directly or view it on GitHub.
from loadcss.
This is merged now. @addyosmani I'd be interested in your thoughts on any better approach now that we have something workable at least.
from loadcss.
For posterity, the document.styleSheets
addition after load is a WebKit/Blink behavior. In Gecko the document.styleSheets
addition happens immediately after the stylesheet node is appended to the document.
Probably worth testing on a Firefox phone, if anyone has one.
from loadcss.
Related Issues (20)
- FOUC on 'No Throttled' condition? HOT 2
- Polyfill has an issue in chrome
- Optionally preload without as attr?
- Don't rely on invalid media attributes to download? HOT 10
- standalone or via npm?
- element with id `global` prevents loadCSS execution
- Error thrown by Content-Security-Policy HOT 5
- Supports preload
- Cannot use inline 'onload' because of CSP HOT 6
- The plugin doesn't do anything to preload elements in Firefox HOT 1
- Cannot install version 3.0.0 because node version is hardcoded to 11.9.0 HOT 5
- Where has the cssrelpreload polyfill gone in 3.0.0? HOT 2
- Required node version HOT 5
- Export onloadCSS
- CSS is being loaded twice HOT 3
- loadCSS not helping with render-blocking content
- Why do I sometimes get a recommendation in google pagespeed 'Reduce unused CSS' ? HOT 1
- Wouldn't loading css asynchronously cause FOUC? HOT 1
- Calling loadCSS from a TypeScript Vite application throws Uncaught TypeError: Cannot read properties of undefined (reading 'createElement') at loadCSS (loadCSS.js:13:16)
- Help - loadCSS/Critical file load not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from loadcss.