I have added a javascript which loads a random css each time the site loads, and after I added this script, the website shows without CSS for a few milliseconds before showing normally
Here is the script:
(function() {
var sheet = document.createElement('link');
sheet.rel = 'stylesheet';
sheet.href = 'css/' + (Math.floor(Math.random()*6)+1) + '.css';
document.getElementsByTagName('head')[0].appendChild(sheet);
})();
and here is where I put it in html I have tried putting it outside the body and outside the head but still the same issue
<html lang="en" class="no-js">
<head>
<script type="text/javascript" src="js/random.js"></script>
<head>
Fixed new code:
var RANDOM_CSS = {
cssfiles : ['1.css','2.css','3.css','4.css','5.css','6.css'],
pathtocss : 'css/',
getrandomcss : function() { return this.cssfiles[Math.floor(Math.random()*this.cssfiles.length)]; },
getlinktag : function() { return '<link rel="stylesheet" type="text/css" href="'+this.pathtocss+this.getrandomcss()+'" />'; },
printlinktag : function() { document.write(this.getlinktag()); }
};
and
<script type="text/javascript" src="/js/random.js"></script>
<script type="text/javascript">
RANDOM_CSS.printlinktag();
</script>