防止Firefox中的fouc和ie
Posted
技术标签:
【中文标题】防止Firefox中的fouc和ie【英文标题】：Prevent fouc in firefox and ie 【发布时间】：2016-02-08 19:54:45 【问题描述】：我正在尝试防止 FF 和 IE 中的 FOUC。加载我的 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-topborder: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-leftcolor:#000;list-style: outside none none;padding-left:1%;padding-right:1%;margin-top:1%a.navbar-brandpadding-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>
【问题讨论】：
这不是一个完全切题的问题，您是否有理由像这样加载样式和脚本，而不是简单地通过声明<link> 和 <script> 标签来加载它们？
嗨 Tasos - 现代性能优化标准建议异步加载文件。目前我的网站正在同步加载 CSS（只需在 中声明 标签）并异步加载 JS 文件。但是，当我同时加载
您可能不应该异步加载 CSS。如果没有 CSS，就没有要渲染的样式，因此 FOUC。但是，您可以通过头部的 CSS 隐藏页面的内容，并且仅在加载 CSS 时显示它。但我想我会同步加载 CSS（除非你有超过 100K 的 CSS）。
Setting a function to hide and then show the body works on Chrome, but not IE/FF. - 那你一定做错了。删除 display:none 时 document.readyState == 'complete' 将在加载任何异步样式之前这样做。我很惊讶它可以在 Chrome 中运行，但是 chrome 确实有这些类型的事件的怪癖
【参考方案1】：
一旦所有 CSS 完成加载，我会删除 display:none 样式，像这样
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
;
【讨论】：
太棒了！谢谢雅罗曼达！所有优秀的信息和非常丰富的信息:)【参考方案2】：这是我用来解决 FOUC 问题的解决方案。我将 HTML 标记的不透明度设置为 0，并给模板 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 之类的操作，他们不喜欢它，所以这是我能想到的最接近的方法。
【讨论】：
【参考方案3】：我赞成你的答案@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>
大声回答主题Animation CSS3: display + opacity on stack overflow
【讨论】：
以上是关于防止Firefox中的fouc和ie的主要内容，如果未能解决你的问题，请参考以下文章
处理 Firefox 扩展中的文本选择事件（防止用户选择文本）
[转]保护眼睛的Windows和IEFirefox谷歌等浏览器颜色设置
使用 HTML5 拖放防止拖动事件干扰 Firefox 中的输入元素