个人中心
gpt4 book ai didi

javascript - 在 firefox 和 ie 中防止 fouc

转载 作者：太空宇宙 更新时间：2023-11-04 02:47:46 25 4
gpt4 key购买 nike

我试图在 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-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>

最佳答案

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

关于javascript - 在 firefox 和 ie 中防止 fouc，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33587623/

25 4 0
文章推荐： python - kivy __init__ 采用 1 个位置参数，但给出了 2 个
文章推荐： node.js - 同步删除文件找不到文件
文章推荐： python - setuptools:强制另一个包的版本(如果存在)而不强制安装这个包(如果不存在)
文章推荐： jquery - 为什么什么都没有形成？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com