3 ms·

Any tips on how to handle site layouts that depend on the js that is asynchronously loaded via the async attribute? Seems like this can cause a flash of unstyl

• bshimmin 11y ago
  Use CSS to hide the unstyled content, and then JavaScript to remove that styling and display it. This will, of course, invoke the ire of those who browse with JavaScript disabled.
  • paukiatwee 11y ago
    How I did it is begin with .no-js class and using Modernizr to remove the class so I can style element for .no-js .my-class -> visibility: visible and .my-class -> visibility: hidden then finally using JS to remove visibility css. So if .no-js class is available (when browser disabled JS), .my-class element still visible. If .no-js is not available (when browser enabled JS), .my-class element will be hidden and visible by your JS See http://stackoverflow.com/questions/6724515/what-is-the-purpose-of-the-html-no-js-class http://stackoverflow.com/questions/6724515/what-is-the-purpo....
• nostrademons 11y ago
  If you can, pre-render the initial page load into HTML on the server, then attach the JS event handlers after the page has finished loading. Both Google Closure (via Closure Templates) and React (via Node.js) have functionality for this. If you can't, you can often load a skeleton containing just the HTML & CSS for page layout into the browser, and then fill in the content via JS later. The user cares about responsiveness; if they see the basic structure of the page load, even if there's no content yet, it'll feel more snappy than a page which waits for all the JS to download before rendering anything.