Giter Site home page Giter Site logo

Success callback about loadcss HOT 9 CLOSED

filamentgroup avatar filamentgroup commented on September 4, 2024
Success callback

from loadcss.

Comments (9)

astrotim avatar astrotim commented on September 4, 2024

+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.

achalv avatar achalv commented on September 4, 2024

+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.

adammcarth avatar adammcarth commented on September 4, 2024

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.

astrotim avatar astrotim commented on September 4, 2024

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.

adammcarth avatar adammcarth commented on September 4, 2024

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.

adammcarth avatar adammcarth commented on September 4, 2024

What do you think @scottjehl?

from loadcss.

scottjehl avatar scottjehl commented on September 4, 2024

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.

DesignByOnyx avatar DesignByOnyx commented on September 4, 2024

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.

zachleat avatar zachleat commented on September 4, 2024

Fixed by #47

from loadcss.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.