Comments (9)
+1
It would be good be able to apply some temporary styles on selected components, such as display: none or background fill color, which are specific to a body class that is then removed by a callback function once the stylesheet has loaded.
from loadcss.
+1
Sounds like a good idea. I was recently working on a project where I would've loved to use a success callback for the exact same use-case that @astrotim mentioned above.
from loadcss.
Mhmm. There's definitely a use for it, regardless of whether it's merged into the main project or maintained as a separate branch.
Any ideas on how you would check if the styles have been loaded properly? Checking for the existence of the <link>
tag won't cut it I'm afraid.
from loadcss.
I managed to do this by adding an id attribute to the loadCSS
function, eg:
ss.id = "stylescss";
then using setInterval
to check for the element with this id, which removes the class when the element has loaded, like so:
function hasCssLoaded() {
var stylecss = document.getElementById("stylecss");
if(stylecss !== null) {
clearInterval(cssTest);
document.documentElement.className = document.documentElement.className.replace("precss","");
} else {
}
}
var cssTest = window.setInterval(hasCssLoaded, 100);
I haven't used this in production, or tested it very extensively, but it might point you in the right direction.
from loadcss.
I think adding a unique identifier is part of the equation. Perhaps something that we can leave in the tag forever and pass it as a variable to the callback function (if it needs to be removed/changed/reset later)?
// generate a random 5 character id for the stylesheet
ss.id = "loadCSS-" + Math.random().toString(36).substr(2, 5);
But it should also check if the css file exists, shouldn't it? As far as I'm concerned, loadCSS("////dfsdsfsdfjkbnkjdnfgv");
should make the callback return false
, not true
(doesn't exist)
from loadcss.
What do you think @scottjehl?
from loadcss.
Well, if it was as easy as it is in JS, I’d certainly be all for it. Last I read, it’s pretty complicated to do reliably. This post is a bit outdated, mind http://www.phpied.com/when-is-a-stylesheet-really-loaded/
On Oct 3, 2014, at 1:39 AM, Adam McArthur [email protected] wrote:
What do you think @scottjehl?
—
Reply to this email directly or view it on GitHub.
from loadcss.
I have found a simple solution to this, but I have not done extensive testing... so some feedback would be great.
The only requirement is that you can't use this on the <body>
tag. No big deal if you ask me.
You keep your same Usage code you're already familiar with. In place of any opening tag, you do the following:
<script>document.write('<div class="page-wrapper" style="visibility: hidden;">');</script>
<noscript><div class="page-wrapper"></noscript>
and make sure this css is in your lazy loaded CSS file:
.page-wrapper {
visibility: visible !important;
}
This can be used anywhere on the page, so long as you can target the node with some sort of CSS selector. I tried to dynamically write the <body>
tag with no success - so I would avoid using this on tags the browser will insert automatically: <html>
, <body>
, <tbody>
... etc. You could even embed some transition styles in the dynamic tag and have a nice fade in effect:
<script>document.write('<div class="page-wrapper" style="visibility: hidden; zoom: 1; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s;">');</script>
<noscript><div class="page-wrapper"></noscript>
.page-wrapper {
visibility: visible !important;
filter: alpha(opacity=100) !important;
opacity: 1 !important;
}
from loadcss.
Fixed by #47
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.