Загружать javascript перед отображением страницы?

Я хочу запустить некоторый код jquery перед загрузкой моей страницы. Я добавляю несколько классов, которые меняют css с javascript, и когда страница загружается, я вижу "старый" css в течение короткого времени. Есть идеи? Благодаря

Ответ 1

Я хочу запустить некоторый код jquery перед загрузкой моей страницы.

Это легко сделать; это смешно, потому что большую часть времени люди пытаются сделать это по-другому.

Когда браузер сталкивается с тегом script, запрещающим использование нескольких специальных атрибутов (и браузера, поддерживающего их), вся обработка страницы доходит до визга и браузер передает script на JavaScript двигатель. Только после завершения script обработка страницы продолжается.

Итак, если в разделе head вашей страницы есть тег script, вы можете выводить классы CSS с помощью функции document.write:

<DOCTYPE html>
<html>
<head><title>Foo</title>
<script src='jquery.js'></script>
<script>
if (some_condition) {
    document.write("<style>foo { color: blue; }</style>");
}
else {
    document.write("<style>foo { color: red; }</style>");
}
</script>

Обратите внимание, что в приведенном выше примере some_condition может опираться и ссылаться на элементы, расположенные над ним в документе (поскольку браузер еще ничего не сделал с остальной частью документа, так как он ждет, чтобы увидеть, что document.write содержимое script будет выводиться).

Живой пример (обновите его несколько раз, в половине случаев он краснеет, в половине случаев он синий). Он не использует jQuery, но вы получаете идею.

Ответ 2

Предполагая, что вы уже используете событие onLoad на теле или используя обратный вызов jQuery, вы можете начать со стиля = "display: none;" на вашем корневом div, сделайте свой материал JS и, наконец, установите "display: block" на этом div, когда вы готовы разоблачить содержимое. Вуаля?

Ответ 3

В основном это аналогичная проблема с внедрением loader/spinner. Вы показываете анимированный gif пользователю, и когда страница завершает загрузку, вы удаляете ее.
В этом случае вместо отображения gif мы показываем пробел.

Существуют различные способы достижения этого результата. Здесь немного упорядоченных с точки зрения простоты и производительности.

Глобальное правило CSS.
Скройте body в глобальном файле CSS.
```
body { display:none; }
```
И как только документ закончит загрузку, переключите отображение:
```
// Use 'load' instead of 'ready' cause the former will execute after DOM, CSS, JS, Images are done loading
$(window).load(function(){
  $(body).show();
});
```
Демо
титульная страница с слоем div
Скройте содержимое с помощью div, сидящего на верхней части страницы, и удалите его позже.
```
div#page_loader {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: white;
   z-index: 100;
}
```
Демо
фрагмент JavaScript
Скрыть body до отображения страницы:
```
<body onload="document.body.style.display='none';">
```
Демо

Если вы используете Modernizr, вы также можете использовать его классы CSS, чтобы скрыть/показать содержимое в зависимости от пользовательского устройства или браузера.

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

Ответ 4

Удалите css перед отображением страницы:

(Я использую это для удаления выделения Css из таблицы и WORKS!)

<script type="text/javascript">

    function removeHighlight(){
        var elm = $("#form_show\\:tbl_items tr");
        elm.removeClass('ui-state-highlight');
    }

    $(document).ready(function(){
        removeHighlight();
    });

</script>

Ответ 5

Поместите свой код в документ готовым. Все, что внутри него загрузится, как только загрузится DOM и до загрузки содержимого страницы

$(function(){
 your code goes here...
});

Или

$(document).ready(function(){
 your code goes here..
});