在 firefox 和 ie 中防止 fouc

Question

我试图阻止 FF 和 IE 中的 FOUC。加载我的 css 异步，（可以理解）导致它。设置隐藏然后显示正文的功能适用于 Chrome，但不适用于 IE/FF。

我已经尝试了在线显示的所有解决方案，它们应该有效并且 none 确实有效。想知道我的代码中是否遗漏了什么；或者有人知道其他解决方案吗？

<!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>

Answer 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
};

Answer 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 的事情，所以这是我能想到的最接近的事情。

Answer 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 和 ie 中防止 fouc

Prevent fouc in firefox and ie

javascript

css

firefox

asynchronous

fouc