jQuery: Как остановить отображение страницы до тех пор, пока она не будет обработана?

Я использую jQuery для изменения стиля некоторых страниц в большом наборе существующих веб-страниц. Это работает, но проблема заключается в том, что для более длинных страниц страница на короткое время отображается с неправильными стилями, прежде чем javascript начнет и преобразует страницу.jQuery: Как остановить отображение страницы до тех пор, пока она не будет обработана?

Я использую этот вид вещи (оповещения только подчеркнуть проблему):

$(document).ready(function(){ 
    ... 
    alert("at this point the page is visible unstyled"); 
    $('body').addClass('myStyle'); 
    alert("now page looks like I want it to"); 
    ... 
}

Как предотвратить браузер от не отображать страницу до $ (документ) .ready (функция() завершает

EDIT
Примечание: Я не могу изменить HTML страниц (они не мои) Все, что я могу сделать, это своп в качестве замены JavaScript-файл и работать с тем, что. уже в HTML-

источник

2010-03-28 Anonymous

Wrap все с <div id="wrap" style="display: none"></div>, а затем в конце вашего domReady обработчика поместить $('#wrap').css('display', '');

В случае, если вы не можете изменить HTML, попробуйте это в скрипте:

$('body').css('display', 'none'); 

$(document).ready(function(){ 
    ... 

    $('body').css('display', ''); 
}

источник

2010-03-28 09:22:11

Извините, я должен был сказать: я не могу изменить HTML-страницы (они не мои). Все, что я могу сделать, это своп в заменяемом файле JavaScript и работать с тем, что уже есть в HTML. – 2010-03-28 09:27:15

Просто опубликуйте тот же общий ответ. Я добавил стиль тега body и просто использовал $ («body»). Show(); для удаления дисплея: none ;. Быстрый тест показал, что он отлично работает как в FF 3.6, так и в IE8. –

Нет. Не работает, я только что протестировал его. Страница все еще отображается (* очень * кратко) до $ ('body'). Css ('display', 'none'); пинает и скрывает тело. Примечание: на небольшой странице это не видно, но на большой странице есть мерцание, когда один набор стилей изменяется на другой. Что происходит: 1. Отобразите страницу с ее оригинальными стилями; 2. Скрыть тело. 3. Покажите тело с новыми стилями. – 2010-03-28 11:56:24

var blanky = document.createElement("div"); 
blanky.style.width = "100%"; 
blanky.style.height = "100%"; 
blanky.style.position = "absolute"; 
blanky.style.top = "0px"; 
blanky.style.left = "0px"; 
blanky.style.backgroundColor = "white"; 
blanky.id = "blanky"; 
document.body.appendChild(blanky);

сейчас после того, как вы загрузили все свои вещи, сделайте это;

document.getElementById ("blanky"). Style.display = "none";

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

Это также позволяет поместить практически что угодно в div, скажем, на экран загрузки, например!

источник

2010-03-28 09:49:46 sinni800

Этот вид работ в Firefox (3.6), путем нажатия существующего содержимого страницы ниже складки, под большим белым пространством выше Но в IE8 это вообще не работает. – 2010-03-28 11:33:30

Если у вас нет каких-либо AJAX следующее достаточно:

(до <body> тега)

body { 
    display: none; 
}

(после загрузки библиотеки Jquery)

$(document).ready(function(){ 

    // Other code here 

    $('body').css('display', 'inline'); 
}

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

Javascript выполняет код последовательно, но не дожидается завершения асинхронных задач перед перемещением. Итак, если код, который вы заменяете заполнитель // Other code here, является асинхронным, тело будет отображаться до его завершения, что приведет к победе над целью скрыть тело.

Один из способов преодолеть это - использовать функцию обратного вызова. Например, вы можете использовать .always как часть AJAX:

$('body').css('display', 'none'); 

$(document).ready(function(){ 

    $.ajax(

     // AJAX of some sort e.g. loading a Google Map. 

    ).always(function() { 

     $('body').css('display', 'inline'); 

    }); 

}

.always Функция обработчика не будет выполняться до тех пор, AJAX не было предпринято.

Это не конец AJAX, хотя, я бы порекомендовал вам заглянуть в deferred object.

источник

2015-02-11 21:50:25 anthonygore

jQuery: Как остановить отображение страницы до тех пор, пока она не будет обработана?

ответ

Смежные вопросы