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

Question

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

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

116

css fouc

Источник

user243460 11 июл '10 в 02:03

17 ответов

Решение

Проблема с использованием стиля 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')).

90

Источник

user888177 22 мар '12 в 13:41

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

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

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

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

html {
    visibility: visible;
    opacity: 1;
}

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

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

64

Источник

user3128942 18 ноя '18 в 19:23

Решение только для 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>, Я считаю это недостатком, потому что это нарушает обычную практику. Было бы хорошо, если бы был defer атрибут для <link> как есть для <script> потому что это позволило бы нам поместить его в <head> и по-прежнему достичь нашей цели.

36

Источник

user1927876 06 май '17 в 17:38

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

<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. Итак, вот более компактное решение, которое пока является самой простой вещью, которую я нашел, которая работает.

<script type="text/javascript">
    var elm=document.getElementsByTagName("html")[0];
    elm.style.display="none";
    document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; });
</script>

18

Источник

user8946 10 фев '14 в 03:16

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

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

<script type="text/javascript">

</script>

12

Источник

user7710101 17 ноя '17 в 10:16

Каждый ответ на этой странице замедляет загрузку и только скрывает основную проблему. Если вы испытываете FOUC, узнайте, ПОЧЕМУ это происходит, и исправьте это.

В основе происходит следующее:

потому что ваши таблицы стилей загружаются неправильно: они должны загружаться через тег в HTML, а не через JavaScript
потому что ты разместилscriptтеги передlinkтеги, которые могут вызвать «операцию макета» и заставить браузер отобразиться еще до того, как он попытается загрузить стиль.

Для справки, вот пример FOUC:

6

Источник

user288906 15 авг '22 в 05:59

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

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

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

5

Источник

user3734244 12 май '17 в 14:57

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

set <body style="opacity:0; >

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

2

Источник

user11884198 05 авг '19 в 14:38

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

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

2

Источник

user5175802 08 фев '19 в 13:54

Простое решение, позволяющее избежать появления нестилизованного контента без javascript:

      <!DOCTYPE html>
<html>
<head>
    <title>Bla bla</title>
    <link href="..." rel="stylesheet" />
    <link href="..." rel="stylesheet" />
</head>
<body style="opacity: 0">
    <!-- All HTML content here -->
    <script src="..."></script>
    <script src="..."></script>
    <style>
        body {
            opacity: 1 !important;
        }
    </style>
</body>
</html>

Когда синтаксический анализатор достигает тела, он затухает с помощью «opacity: 0». Когда синтаксический анализатор, наконец, достигает самого низа после того, как все остальное проанализировано, тело снова отображается с использованием стиля на странице. Ключевое слово! Important там важно ;-), потому что оно отменяет предыдущий встроенный стиль тега body.

В этом случае использование «opacity: 0» для затухания лучше, чем «display: none», потому что, если у вас есть операции макета, выполняемые javascript, они могут не работать, если затронутый элемент не отображается.

У меня это сработало.

2

Источник

user2040685 02 фев '21 в 16:25

Для меня исправить FOUC в FireFox было легко, просто изменив код ссылки CSS в моем<head>из этого:

      <link rel="stylesheet" href="/assets/main.css">

...К этому:

      <link rel="stylesheet" type="text/css" href="/assets/main.css" />

Я считаю, что в том числеtype="text/css"помогает FireFox определить приоритет загрузки и рендеринга CSS? Это мое мнение. Ваше здоровье!

0

Источник

02 июл '23 в 01:07

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

Добавьте все стили вашего заголовка в <style/> тег в <head/>
в верхней части тега стиля добавить .not-visible-first{visibility: hidden} + другой стиль заголовка
Добавить css через JS в конец тела
document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend","<link rel=\"stylesheet\" href=\"/css/main.min.css?v=1.2.4338\" />");
И не забудьте добавить .not-visible-first{visibility: visible} до конца main.min.css

Эта опция улучшит пользовательский интерфейс

0

Источник

user6170191 07 окт '19 в 16:13

Вы можете попробовать это с ванилью

function js_method(){
//todos
var elementDiv = document.getElementById("main");
elementDiv.style.display ="block";
}

<body onload="js_method()" id="main" style="display:none">
//todos
<h2>Hello</h2>
</body>

0

Источник

user7468924 06 ноя '19 в 12:16

Самый простой способ, который я знаю, - это скрыть тег html, а затем в нижней части вашего файла javascript добавить тег html.

HTML

<html style="display:none;">
    ...
</html>

Javascript

/*
 * FOUC Fix - Flash of Unstyled Content
 * By default, the <html> tag is hidden to prevent the flash of unstyled content.
 * This simple fadeIn() function will allow the page to gracefully fade in once 
 * all assets are loaded. This line of code must remain at the bottom of the js 
 * assets.
 */

$( 'html' ).fadeIn();

Источник: https://gist.github.com/marchershey/139db0e8fd6f03a83578698409d333ce

-1

Источник

user5601253 28 мар '20 в 04:54

Многие решения предлагают загрузку страницы 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:

-1

Источник

user5788495 16 мар '19 в 20:53

Если это произойдет только с вами в FireFox в 2021 году, вы можете проверить этот пост и увидеть очень простое решение:

Вспышка нестилизованного содержимого (FOUC) только в Firefox? FF медленный рендерер?

-2

Источник

26 мар '21 в 13:13

Другие вопросы по тегам css fouc

user751191 12 май '11 в 19:23 2011-05-12 19:23 · Accepted Answer · 2011-05-12 19:23

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

Установите секцию тела как: <body style="visibility: hidden;" onload="js_Load()">
Напиши js_Load() Функция JavaScript: document.body.style.visibility='visible';

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

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