我正试图阻止FF和FOUC的FOUC IE浏览器。加载我的CSS异步，（可以理解）导致它。设置隐藏然后显示正文的功能在Chrome上运行，但不适用于IE / FF。
我已经尝试过在线显示的每个解决方案，这些解决方案应该可行，但没有。想知道我的代码中是否存在被忽略的内容;还是其他人都知道的解决方案？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Refinery</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<style>
.navbar.navbar-default.navbar-fixed-top{border:none;padding-right:2%;font-size:18px;background-color:#000;background-color:rgba(0,0,0,.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)}ul.navbar-left{color:#000;list-style: outside none none;padding-left:1%;padding-right:1%;margin-top:1%}a.navbar-brand{padding-top:1%;margin-bottom:1%;padding-right:1%}
</style>
</head>
<body style="display:none">
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="img/logo1-min.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-left">
<li type="none" class="hover descript">Design & Development</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="hover"><a href="portfolio.html">Portfolio<span class="sr-only"></span></a></li>
<li class="hover"><a href="services.html">Services</a></li>
<li class="hover"><a href="contact.html">Contact<span class="sr-only"></span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="row text-center headDrop">
<div class="col-md-1"></div>
<div class="col-md-10">
<h1>WEB REFINERY</h1>
<h2>Responsive Design & Development</h2>
</div>
<div class="col-md-1"></div>
<br>
</div>
<div class="row text-center">
<div class="col-md-1"></div>
<div class="col-md-10">
<br>
<p>Metro Milwaukee - Design Studio</p>
<p>Web Design - Development - Branding</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
<script type="text/javascript">
/* Beginning of async download code. */
window.onload = function(){
function loadjscssfile(filename, filetype) {
if(filetype == "js") {
var cssNode = document.createElement('script');
cssNode.setAttribute("type", "text/javascript");
cssNode.setAttribute("src", filename);
} else if(filetype == "css") {
var cssNode = document.createElement("link");
cssNode.setAttribute("rel", "stylesheet");
cssNode.setAttribute("type", "text/css");
cssNode.setAttribute("href", filename);
}
if(typeof cssNode != "undefined")
document.getElementsByTagName("head")[0].appendChild(cssNode);
}
loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css", "css");
loadjscssfile("/css/main-min.css", "css");
loadjscssfile("//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js", "js");
loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js", "js");
loadjscssfile("/js/main-min.js", "js");
};
/* End of async download code. */
document.onreadystatechange = function () {
var view = document.getElementsByTagName('body')[0];
if (document.readyState == "complete") {
view.style.removeProperty('display');
} else {}
};
</script>
</body>
</html>
答案 0 :(得分：2)
这是我用来解决FOUC问题的解决方案。我将HTML标记的不透明度设置为0，并给模板.25秒完成所需的所有CSS模板。然后使用JQuery淡入内容。
<html id="no-fouc" lang="en">
<style type="text/css">
#no-fouc { opacity: 0; }
</style>
在关闭正文标记之前，将此位添加到脚本的最底部。
$("#no-fouc").delay(250).animate({"opacity": "1"}, 250);
适用于我测试过的所有浏览器和媒体，似乎也解决了Google PageSpeed的问题。如果你做像set display：none这样的事情，他们就不喜欢它，所以这是我能提出的最接近的事情。
答案 1 :(得分：0)
我会删除display：none样式，一旦所有CSS加载完毕，就像这样
window.onload = function(){
var resources = [
{ url: "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css", type: "css"},
{ url: "/css/main-min.css", type: "css"},
{ url: "//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js", type: "js"},
{ url: "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js", type: "js"},
{ url: "/js/main-min.js", type: "js"}
];
var head = document.getElementsByTagName("head")[0];
var cssToLoad = 0;
var loadOrError = function (e) {
cssToLoad -= 1;
if (cssToLoad < 0) { // prevent early trigger
document.body.style.removeProperty('display');
}
};
resource.forEach(function(resource) {
var element;
if (resource.type == "js") {
element = document.createElement('script');
element.setAttribute("type", "text/javascript");
element.setAttribute("src", resource.url);
} else if (resource.type == "css") {
cssToLoad += 1;
element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", resource.url);
element.addEventListener('load', loadOrError);
element.addEventListener('error', loadOrError);
}
if (typeof element != "undefined") {
head.appendChild(element);
}
});
loadOrError(); // end prevent early trigger
};