Javascript 在firefox和ie中防止fouc
我试图在FF&IE中防止FOUC。加载我的css异步（可以理解）导致它。设置一个隐藏然后显示身体的功能可以在Chrome上工作，但不能在IE/FF上工作 我已经尝试了网上显示的每一个解决方案，它们都应该有效，但没有一个有效。想知道我的代码中是否有被忽略的东西；或者其他任何人都知道的解决方案Javascript 在firefox和ie中防止fouc,javascript,css,firefox,asynchronous,fouc,Javascript,Css,Firefox,Asynchronous,Fouc,我试图在FF&IE中防止FOUC。加载我的css异步（可以理解）导致它。设置一个隐藏然后显示身体的功能可以在Chrome上工作，但不能在IE/FF上工作 我已经尝试了网上显示的每一个解决方案，它们都应该有效，但没有一个有效。想知道我的代码中是否有被忽略的东西；或者其他任何人都知道的解决方案 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
<!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>
网络精炼
.navbar.navbar默认值.navbar固定顶部{边框：无；右键填充：2%；字体大小：18px；背景色：#000；背景色：rgba（0,0,0,6）；过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr=#9900000，endColorstr=#9900000）；-ms过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr=#9900000，endColorstr=#9900000）ul.navbar left{color:#000；列表样式：外部无；左侧填充：1%；右侧填充：1%；边距顶部：1%}a.navbar-brand{padding top:1%；边距底部：1%；右侧填充：1%}
切换导航
设计与开发
网络精炼
响应式设计与开发
密尔沃基地铁设计工作室
网页设计-开发-品牌
/*异步下载代码的开始*/
window.onload=函数（）{
函数loadjscssfile（文件名、文件类型）{
如果（文件类型==“js”）{
var cssNode=document.createElement（'script'）；
setAttribute（“type”、“text/javascript”）；
setAttribute（“src”，文件名）；
}else if（文件类型==“css”）{
var cssNode=document.createElement（“链接”）；
setAttribute（“rel”、“样式表”）；
setAttribute（“类型”、“文本/css”）；
cssNode.setAttribute（“href”，文件名）；
}
if（cssNode的类型！=“未定义”）
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”）；
};
/*异步下载代码结束*/
document.onreadystatechange=函数（）{
var view=document.getElementsByTagName（'body'）[0]；
如果（document.readyState==“完成”）{
view.style.removeProperty（'display'）；
}else{}
};
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
};
window.onload=function（）{
风险值资源=[
{url://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”，键入：“css”}，
{url:“/css/main-min.css”，键入：“css”}，
{url://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”，键入：“js”}，
{url://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”，键入：“js”}，
{url:“/js/main-min.js”，键入：“js”}
];
var head=document.getElementsByTagName（“head”）[0]；
var cssToLoad=0；
var loadOrError=函数（e）{
cssToLoad-=1；
如果（cssToLoad<0）{//防止早期触发
document.body.style.removeProperty（'display'）；
}
};
resource.forEach（函数（资源）{
var元素；
如果（resource.type==“js”）{
element=document.createElement（'script'）；
setAttribute（“type”、“text/javascript”）；
setAttribute（“src”，resource.url）；
}else if（resource.type==“css”）{
cssToLoad+=1；
元素=document.createElement（“链接”）；
setAttribute（“rel”、“样式表”）；
setAttribute（“类型”、“文本/css”）；
element.setAttribute（“href”，resource.url）；
元素。addEventListener（'load'，loadOrError）；
元素。addEventListener（'error'，loadOrError）；
}
if（元素类型！=“未定义”）{
头、子（元素）；
}
});
loadOrError（）；//结束阻止早期触发器
};
<html id="no-fouc" lang="en">
<style type="text/css">
#no-fouc { opacity: 0; }
</style>
在我测试过的所有浏览器和媒体中都能正常工作，而且似乎也解决了Google PageSpeed的一个问题。他们不喜欢你做设置显示：无，所以这是我能想到的最接近的方法。我在你的答案@Vince上投了赞成票，但我想向你展示一种不使用任何javascript的方法：
<html id="no-fouc" lang="en" class="no-js">
<head>
<style type="text/css">
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0.3; }
60% { opacity: 0.5; }
80% { opacity: 0.9; }
100% { opacity: 1; }
}
#no-fouc {
opacity: 0;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
animation-iteration-count: 1;
animation-name: fadeIn;
animation-duration: 1s;
// This line forces the browser to set the opacity to 1 after executing/finishing the animation
opacity: 1;
}
// include your stylesheets here, if you want you can set the opacity afterwards to 1 which I would recommend if you are using external stylesheets
</head>
...
</html>
@-webkit关键帧fadeIn{
0%{不透明度：0；}
20%{不透明度：0；}
40%{不透明度：0.3；}
60%{不透明度：0.5；}
80%{不透明度：0.9；}
100%{不透明度：1；}
}
#无fouc{
不透明度：0；
-webkit动画名称：fadeIn；
-webkit动画持续时间：1s；
动画迭代次数：1；
动画名称：fadeIn；
动画持续时间：1s；
<html id="no-fouc" lang="en" class="no-js">
<head>
<style type="text/css">
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0.3; }
60% { opacity: 0.5; }
80% { opacity: 0.9; }
100% { opacity: 1; }
}
#no-fouc {
opacity: 0;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
animation-iteration-count: 1;
animation-name: fadeIn;
animation-duration: 1s;
// This line forces the browser to set the opacity to 1 after executing/finishing the animation
opacity: 1;
}
// include your stylesheets here, if you want you can set the opacity afterwards to 1 which I would recommend if you are using external stylesheets
</head>
...
</html>