Chrome extension: how do I get rid of FOUC?
The crux of the problem is as follows:
There is a page, I need to change the content of browser extensions, you can use jQuery.
Tried $(document).ready()
but then content is still displayed for a short period of time (FOUC). I am unable to make changes to the page styles on the server.
I am using the Kango framework to create an extension.
source to share
May I assume you are using a combination of CSS and JavaScript. I had the same problem using jQueryUI on a site I am building and found that many of these solutions would contribute invalid content for those without JavaScript.
So here's what I did:
CSS
.flash #wrapper {
display: none;
}
This means it is <div id="wrapper">
only hidden if it is a decompensated flash. Therefore, so that it does not hide from those who lacked javascript, I add a flash class to the element <html>
. So it can only be physically hidden if the end user has JavaScript enabled, otherwise they will at least have access via unleaded content.
JavaScript:
$('html').addClass('flash');
$(doctument).ready(function() {
/* Do all your stuff */
/* When done show the wrapper with the content stylized */
$(#wrapper).show();
});
Depending on the load times of your pages, you might get a little flash, but it won't be a flash of unleaded content, which is pretty ugly. In my case, I had a jQueryUI menu element that would fire a regular element first <ul>
, then a menuUI element, and my elements <div>
would be resized with jQuery so that each column <div>
was equal to the height, but it would flash different heights first. This fixed this while still providing accessibility to any Script-enabled browser.
source to share
By using ECMAscript alone, you cannot reliably avoid this. You don't have a shot if you are waiting for an event DOMContentLoaded
, because at that point the DOM is pretty much rendered and displayed (which is what you see for a short period).
Your best bet would be to adjust the CSS as soon as possible. If the stylesheet is loaded before the DOM is rendered and you would set like
body {
display: none;
}
you won't see anything. You may try
<body>
<script>
document.body.style.display = 'none';
</script>
<!-- more html -->
</body>
if this is some viable / helpful solution for you.
source to share