Устранить вспышку неустановленного контента - PullRequest
Новая
       33

Устранить вспышку неустановленного контента

61 голосов
/ 11 июля 2010

Как остановить флеш-контент (FOUC) на веб-странице?

Ответы [ 9 ]

76 голосов
/ 22 марта 2012

Проблема с использованием стиля css для первоначального скрытия некоторых элементов страницы, а затем с помощью javascript для изменения стиля обратно на видимый после загрузки страницы, состоит в том, что люди, у которых не включен javascript, никогда не увидят эти элементы. Так что это решение, которое не изящно ухудшается.

Поэтому лучше использовать javascript для первоначального скрытия, а также для повторного отображения этих элементов после загрузки страницы. Используя jQuery, у нас может возникнуть соблазн сделать что-то вроде этого: 

$(document).ready(function() {
    $('body').hide();
    $(window).on('load', function() {
        $('body').show();
    });
});

Однако, если ваша страница очень большая с большим количеством элементов, этот код не будет применен достаточно скоро (тело документа не будет готово достаточно скоро), и вы все равно можете увидеть FOUC. Однако есть один элемент, который мы МОЖЕМ скрыть, как только скрипт встретится в заголовке, даже до того, как документ будет готов, - тег HTML. Таким образом, мы могли бы сделать что-то вроде этого: 

<html>
  <head>
  <!-- Other stuff like title and meta tags go here -->
  <style type="text/css">
    .hidden {display:none;}
  </style>
  <script type="text/javascript" src="/scripts/jquery.js"></script>
  <script type="text/javascript">
    $('html').addClass('hidden');
    $(document).ready(function() {    // EDIT: From Adam Zerner's comment below: Rather use load: $(window).on('load', function () {...});
      $('html').show();  // EDIT: Can also use $('html').removeClass('hidden'); 
     });  
   </script>
   </head>
   <body>
   <!-- Body Content -->
   </body>
</html>

Обратите внимание, что метод jQuery addClass () вызывается * вне * метода .ready () (или лучше .on ('load')).

18 голосов
/ 06 мая 2017

Решение только для CSS: 

<html>
  <head>
    <style>
      html {
        display: none;
      }
    </style>
    ...
  </head>
  <body>
    ...
    <link rel="stylesheet" href="app.css"> <!-- should set html { display: block; } -->
  </body>
</html>

Когда браузер анализирует HTML-файл:

  • Первое, что он будет делать, это спрятаться <html>.
  • Последнее, что он сделает, это загрузит стили, а затем отобразит весь контент с примененными стилями.

Преимущество этого решения по сравнению с решением, использующим JavaScript, заключается в том, что оно будет работать для пользователей, даже если у них отключен JavaScript.

Примечание: вам разрешено поместить <link> в <body>. Я считаю это недостатком, потому что это нарушает обычную практику. Было бы хорошо, если бы для <link> был атрибут defer, как для <script>, потому что это позволило бы нам поместить его в <head> и все же достичь нашей цели. 1025 *

18 голосов
/ 10 февраля 2014

Решение, которое не зависит от jQuery, которое будет работать во всех текущих браузерах и ничего не делать в старых браузерах, включает в ваш заголовок следующее: 

<head>
    ...

    <style type="text/css">
        .fouc-fix { display:none; }
    </style>
    <script type="text/javascript">
        try {
            var elm=document.getElementsByTagName("html")[0];
            var old=elm.class || "";
            elm.class=old+" fouc-fix";
            document.addEventListener("DOMContentLoaded",function(event) {
                elm.class=old;
                });
            }
        catch(thr) {
            }
    </script>
</head>

Благодаря @justastudent я попытался просто установить elm.style.display="none";, и, похоже, он работает как нужно, по крайней мере, в текущем Firefox Quantum. Итак, вот более компактное решение, являющееся пока самой простой вещью, которую я нашел, которая работает. 

<script type="text/javascript">
    var elm=document.getElementsByTagName("html")[0];
    elm.style.display="none";
    document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; });
</script>
8 голосов
/ 18 ноября 2018

Это тот, который работал для меня и не требует JavaScript, и он отлично работает для страниц со многими элементами и большим количеством CSS:

Сначала добавьте выделенную настройку <STYLE> для <HTML> тег с видимостью «скрытый» и непрозрачностью в виде «0» в верхней части HTML, например, в начале элемента <HEAD>, например, в верхней части HTML, добавьте : 

<!doctype html>
<html>
<head>
    <style>html{visibility: hidden;opacity:0;}</style>

Затем, в конце вашего последнего файла таблицы стилей .css , установите стили видимости и непрозрачности на «visible» и «1» соответственно: 

html {
    visibility: visible;
    opacity: 1;
}

Если у вас уже есть блок стилей для тега «html», то переместите весь стиль «html» в конец последнего файла .css и добавьте теги «visibility» и «opacity», как описано выше.

https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0

7 голосов
/ 17 ноября 2017

Другим быстрым исправлением, которое также работает в Firefox Quantum, является пустой тег <script> в <head>.Это, однако, оштрафует вашу скорость загрузки страниц и общее время загрузки.Я думаю, что это также основная причина, почему вышеупомянутые решения с другими JS в работе. 

<script type="text/javascript">

</script>
5 голосов
/ 12 мая 2011

Что я сделал, чтобы избежать FOUC:

  • Установите секцию корпуса следующим образом: <body style="visibility: hidden;" onload="js_Load()">

  • Написать js_Load() Функция JavaScript: document.body.style.visibility='visible';

При таком подходе тело моей веб-страницы скрыто до полной страницы и файлов CSS. Как только все загружено, событие onload делает тело видимым. Таким образом, веб-браузер остается пустым до тех пор, пока все не появится на экране.

Это простое решение, но пока оно работает.

4 голосов
/ 12 мая 2017

Никто не говорил о CSS @import

Это была проблема для меня, я загружал две дополнительные таблицы стилей прямо в мой файл CSS с помощью @import

Простое решение: заменитьвсе @import ссылки с <link />

1 голос
/ 08 февраля 2019

Я придумал способ, который не требует никакого реального изменения кода, вау!Моя проблема была связана с импортом нескольких файлов CSS ПОСЛЕ некоторых файлов javascript.

Чтобы решить эту проблему, я просто переместил свои CSS-ссылки так, чтобы они были выше моего импорта javascript.Это позволило импортировать весь мой CSS и готово к работе как можно скорее, поэтому, когда HTML-код появляется на экране, даже если JS не готов, страница будет правильно отформатирована

0 голосов
/ 16 марта 2019

Многие решения предлагают загрузку страницы onLoad (). Проблема с этим подходом заключается в том, что у пользователя не включен Javascript.

Простое решение для меня было: 1. скройте html в вашем файле до загрузки ссылки на таблицу стилей, например 

<head>
  <style> html { display: none; } </style>
  <link rel="stylesheet" href="myStylesheet.css" /> 
</head>

2. в начале вашей таблицы стилей снова отобразите html 

// first line in myStylesheet.css

html {
  display: block;
}

Более подробную информацию вы можете увидеть в моей статье https://www.nnsoftware.at/blog/avoiding-flash-of-unstyled-content:

...