Блог

Главная - Вопросы по программированию - форматирование jquery происходит только тогда, когда документ готов, поэтому при первой загрузке веб-страницы пользователю отображается уродливая страница

форматирование jquery происходит только тогда, когда документ готов, поэтому при первой загрузке веб-страницы пользователю отображается уродливая страница

#jquery #css

#jquery #css

Вопрос:

Это только очень кратко, пока происходит загрузка элементов и jsp includes . Однако это довольно раздражает.

Есть советы по удалению этого? Если быть более конкретным, что такое css-эквивалент hide() и show().

Комментарии:

1. Какого рода форматирование? А что мешает вам использовать css напрямую?

2. скрытие разделов с помощью show / hide, slidedown / slideup

Ответ №1:

Для этого и существует css, js (и jQuery) следует использовать для поведенческого уровня, который влияет на представление, но это не должно быть единственным средством, с помощью которого вы делаете свою страницу презентабельной.

Единственное предложение, которое я могу сделать, помимо оформления страницы с помощью CSS, — это использовать какую-то маску

 #cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0
    right: 0
    background: #fff url('path/to/loading.gif') 50% 50% no-repeat;
}

<div id="cover">
</div>

А затем используйте:

 $(window).load(
    function() {
        $('#cover').remove();
    }
);

Но я думаю, что это, вероятно, просто усугубляет ошибки, которые вы, возможно, уже допускаете.

Ответ №2:

Используйте css, чтобы задать начальное состояние всех элементов и вносить изменения только после загрузки с помощью js / jquery. Не похоже, что это может быть более неудобно, чем кодирование логики форматирования элементов в js.

У вас всегда будет такая задержка, если js используется для создания начального состояния, как вам кажется, вы рассчитали. Даже сильно оптимизированный.

Я думаю, уродливым решением было бы иметь js-сниппеты, встроенные в html, которые форматируют элементы по мере их загрузки браузером. Пожалуйста, не делайте этого.

То, что скрывает css-эквивалент hide, зависит от того, как ваш js покажет это позже, но, как правило, display:none или visibility:hidden . Элемент также может быть удален с экрана с отрицательными позициями, как в position:absolute;left:-1000px;

Ответ №3:

Вы должны сделать свой HTML DOM меньше и проще, чтобы он загружался быстрее.