Geek asks and answers

I need to make IE 6, 7 and 8 wait for CSS to load before rendering the page

I have a responsive website on which I create http://50.97.104.102/~topdog/ . Since the css desktop appears at the bottom of the stylesheet, the page is displayed in half a second in the mobile layout (the logo appears in the center). Then it switches to the desktop format. This only happens in IE 6, 7 and 8. This is a very subtle question that only lasts half a second. Most modern browsers (I use chrome) seem to wait until all CSS is loaded before the page is rendered.

Is there a way to make IE 6,7 and 8 wait until the entire CSS file is loaded before the page is displayed? Preferably without javascript.

+3
source share
1 answer

You can use the following CSS

body {
  visibility: hidden;
}
body.finished {
   visibility: visible;
}

And from the onload handler, add the finished class to the body.

This will not work without JS. If you want this to work without JS, you can do the following, which will flicker if JS is disabled, but will remove flicker if JS is enabled.

body.not-ready{
   visibility: hidden;
}

<body>
<script>
  $(document.body).addClass('not-ready');
  $(window).load(function(){
    $(document.body).removeClass('not-ready')
  });
</script>

</body>
+2
source

More articles:


All Articles