Исключить вспышку неравномерного содержимого

Как остановить вспышку нелистного содержимого (FOUC) на веб-странице?

ОТВЕТЫ

Ответ 1

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

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

  • Напишите функцию js_Load() JavaScript: document.body.style.visibility='visible';

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

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

Ответ 2

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

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

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

Однако, если ваша страница очень большая с большим количеством элементов, тогда этот код не будет применен достаточно скоро (тело документа скоро не будет готово), и вы все равно можете увидеть FOUC. Однако есть один элемент, который мы можем скрыть, как только script встречается в голове, даже до того, как документ будет готов: тег 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 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')).

Ответ 3

Решение только для 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> и все же достичь нашей цели.

Ответ 4

Решение, которое не зависит от 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>

Ответ 5

Это тот, который работал для меня и не требует 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

Ответ 6

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

У меня был 100% успех с этим. Я думаю, что это также основная причина, почему выше решения с другими JS в работе.

<script type="text/javascript">

</script>

Ответ 7

Прошло некоторое время, так как это привлекло внимание. Если вам удобно поддерживать это только нa >= IE 10, вы можете просто сделать следующее:

<html>
  <head>
    <script>
      document.documentElement.style.display = "none";
    </script>
    <script defer>
      document.documentElement.style.display = "";
    </script>
  </head>
  <body>
    ... content
  </body>
</html>

Скрытый документ script будет запущен немедленно, а defer script будет запущен при загрузке страницы. Обратите внимание, хотя он не будет устранять FOUC на IE 9, он все равно позволит загружать страницу в обычном режиме.

Если вам нужно это для работы с более старыми браузерами, в теге head работает следующее:

<script>
  document.documentElement.style.display = "none";
  // (no-jquery document.ready)
  (function onReady(f) {
    document.readyState === "complete"
      ? f() : setTimeout(onReady, 10, f);
  }(function() { 
    document.documentElement.style.display = "";
  }));
</script>

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

Вот мой код.. надеюсь, это решит вашу проблему

set <body style="opacity:0; >

<script>
    $(document).ready(function() {
        $("body").css('opacity', 1);
    });
</script>

Ответ 11

Лучшее решение, которое я нашел до сих пор, выглядит так:

  1. Добавьте все стили вашего заголовка в тег <style/> в <head/>

  2. в верхней части тега стиля добавьте .not-visible-first{visibility: hidden} + другой стиль заголовка

  3. Добавьте CSS через JS в конце тела

    document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend","<link rel=\"stylesheet\" href=\"/css/main.min.css?v=1.2.4338\" />");

  4. И не забудьте добавить .not-visible-first{visibility: visible} в конец main.min.css

Эта опция создаст лучший пользовательский опыт