Question

我试图在我的网站上阻止FOUC。到目前为止，这是我的代码：

explain select c1.client_id,
  c1.object_key,
  c1.prio,
  count(*)-1 as sort_idx
from clients as c1
  left join clients as c2
    on c1.client_id = c2.client_id
      and c1.object_key >= c2.object_key
      and c1.prio >= c2.prio
group by c1.client_id,
        c1.object_key,
        c1.prio
order by
  c1.prio,
  sort_idx
 limit 10;



Limit  (cost=512.53..512.56 rows=10 width=12)
  ->  Sort  (cost=512.53..513.03 rows=200 width=12)
        Sort Key: c1.prio, ((count(*) - 1))
        ->  HashAggregate  (cost=505.71..508.21 rows=200 width=12)
              Group Key: c1.client_id, c1.object_key, c1.prio
              ->  Nested Loop Left Join  (cost=0.15..484.80 rows=2091 width=12)
                    ->  Seq Scan on clients c1  (cost=0.00..29.40 rows=1940 width=12)
                    ->  Index Only Scan using clients_idx on clients c2  (cost=0.15..0.22 rows=1 width=12)
                          Index Cond: ((client_id = c1.client_id) AND (object_key <= c1.object_key) AND (prio <= c1.prio))

我在哪里错了？我仍然需要大约1-2秒的FOUC。

由于

杰森

Answer 1

这是我的解决方案：

<head>

<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>

<noscript>
    <link rel="stylesheet" href="css/skel.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>

    <style type="text/css">
       .no-fouc {display: none;}
     </style>

    <script type="text/javascript">
      document.documentElement.className = 'no-fouc';
     $(window).on("load", function() {
        $('.no-fouc').removeClass('no-fouc');
     });    
    </script>

</head>

而不是使用：

     $(document).ready(function() {

我用过：

    $(window).on("load", function() {

执行：

    $('.no-fouc').removeClass('no-fouc');

完整页面完整加载后，包括所有框架，对象和图像。

使用$（document）.ready（）事件防止FOUC

1 个答案: