Menu
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 most) 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!
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> 
622
Anytime you make changes to CSS, JavaScript and are viewing the page you've updated - you will see this concern. You can force a refresh by pressing CTRL+F5 on the browser and that will get the latest version.
Since the browser has to wait for all CSS to be loaded, it's important to provide it as quickly as possible. A very simple way to make sure the browser receives CSS as early as possible is by including it in the HEAD section of your HTML document. This way, the browser will start loading CSS as soon as possible.
To load CSS Files asynchronously in both Chrome and Firefox, we can use “preload” browser hint and “media='print'” attribute along with onload event feature in a ordered way. you may use the codes below to load CSS Files without render-blocking resources features in Firefox and Chrome.
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.
129
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
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
