Суть проблемы заключается в следующем:

Есть страница, мне нужно изменить содержимое расширений браузера, вы можете использовать jQuery.

Пробовал $(document).ready(), но затем содержимое все еще отображается в течение короткого периода времени (FOUC). Я не могу вносить изменения в стили страницы на сервере.

Я использую фреймворк Kango для создания расширения.

3
user2025131 30 Янв 2013 в 15:39

2 ответа

Лучший ответ

Я предлагаю вам использовать комбинацию CSS и JavaScript. У меня была такая же проблема с использованием jQueryUI на сайте, который я создаю, и обнаружил, что многие из этих решений делают контент недоступным для тех, у кого нет JavaScript.

Итак, вот что я сделал:

Css:

.flash #wrapper {
     display: none;
}

Это устанавливает <div id="wrapper"> скрытым, только если он является потомком класса flash. Поэтому, чтобы он не был скрыт от тех, у кого нет JavaScript, я добавляю класс flash в элемент <html>. Таким образом, он может быть физически скрыт, только если у конечного пользователя включен JavaScript, в противном случае он, по крайней мере, будет иметь доступ через контент без стилей.

Javascript:

$('html').addClass('flash');
$(document).ready(function() {
     /* Do all your stuff */

     /* When done show the wrapper with the content styled */
     $(#wrapper).show();
});

В зависимости от времени загрузки ваших страниц, вы можете получить немного флеш-памяти, но это не будет флеш-контент без стилей, что довольно уродливо. В моем случае у меня был элемент меню jQueryUI, в котором сначала мигал бы обычный элемент <ul>, а затем элемент menuUI, а мои элементы <div> были изменены с помощью jQuery, так что каждый столбец <div> был равен высоте , но это будет мигать разные высоты в первую очередь. Это исправило это, все еще предоставляя доступ к браузерам не-JavaScript.

0
Kate Orlova 2 Мар 2020 в 17:10

Используя только ECMAscript, вы не можете надежно избежать этого. У вас не будет ни единого выстрела, если вы ждете события DOMContentLoaded, потому что в этот момент DOM в значительной степени отображается и отображается (это то, что вы видите в течение короткого периода времени).

Лучшим вариантом будет изменить CSS как можно скорее. Если определение таблицы стилей загружается до визуализации DOM, и вы должны установить

body {
    display: none;
}

Вы бы ничего не увидели. Вы можете попробовать как

<body>
    <script>
        document.body.style.display = 'none';
    </script>
    <!-- more html -->
</body>

Если это какое-либо жизнеспособное / полезное решение для вас.

0
jAndy 30 Янв 2013 в 11:46