Force browsers to load CSS before showing the page_问答_开发者

Force browsers to load CSS before showing the page

开发者 https://www.devze.com 2023-01-25 10:41 出处：网络

I\'ve made a mobile version of my site. When loading the page however, the site is first shown without the CSS applied, and after a second (at mo开发者_StackOverflow社区st) it applies the CSS and rend

相关专题：browser css

I've made a mobile version of my site. When loading the page however, the site is first shown without the CSS applied, and after a second (at mo开发者_StackOverflow社区st) it applies the CSS and renders it properly. This behaviour is consistent across all browsers (including mobile ones).

Do you have any idea, how I could force browsers to load the CSS first (which is really tiny in size) and then render the content? I've seen something about including the CSS files outside the head, but as far as I know it's against the specs, and I am afraid such hack may brake things on some mobile browsers.

Thanks!

Update

Here's the source

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Albite BOOKS mobile</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
    <meta name="description" content="Free e-books for Java Mobile phones."/>
    <meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/>
    <meta name="language" content="en_GB"/>
    <meta name="classification" content="public"/>

    <link rel="shortcut icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <!-- .... -->
  </body>
</html>

I believe I have found a better way to handle this...

At the top of your output file put the following:

<body>
  <div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div>
  ...
</body>

Then on the last line of your last loaded CSS file put:

#loadOverlay{display: none;}

This basically uses the problem against itself. The first bit of displayable html that is loaded places a blank canvas over top of everything while CSS loads and processes, the last bit of CSS to load and process removes the canvas. From my testing this solves the problem completely.

Have you ever used requirejs? you could set after your

requirejs.config(<confObj>);

something like this

require(Array[<all your CSS & JS >]);

requirejs will do the cache (like) stuff for you! requirejs api

You can ensure that an HTML element isn't displayed until its CSS is loaded with this simple technique:

// CSS
#my-div { display:block !important; }

// HTML
<div id = "my-div" style = "display:none;">

  <p>This will be display:none until the CSS is applied!</p>

</div>

Because the div tag has display:none as an inline style, it will not be displayed until after the CSS is applied. When the display:block !important rule is applied, the div's inline style will be overridden and the div will appear fully styled.

Nathan Bunney - good idea that ispired me, but i think better way is to remove overlay with javascript after document is fully loaded.

$(document).ready( function() {
  $("#loadOverlay").css("display","none");
});

Browsers read code from the top to the bottom, so the higher the code is on page, and how compact the code is, will affect the load time on the page. You can't really pre-load it like you would with images or something, so I would really look into caching the file, it's probably the best solution. Sorry theres no better alternative for this. But to be honest, one second load time isn't really too bad.