$(окно).загрузить(функция(){}); проблема в опере

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

//CSS looks like
body {display: none;}


/* div block height calculator */
function recalculateHeight(id, add){
 var height = $(id).height();

 if (height < 650) height = 650;

 if (add)
  height = height + add;

 $('#left_div').height(height);
 $('#center_div').height(height);
 $('#right_div').height(height);
}
//recalculate height when page is fully loaded
$(document).ready(function(){
 $(window).load(function(){
  $('body').show();
  recalculateHeight("#center_div");
 });
});

Все отлично работает в IE, Firefox, Safari. В Chrome вычисление высоты работает, но кажется, что body не прячется, потому что все изображения загружаются как обычно. В Опере обе функции не работают. Не показывается страница при загрузке всего контента, не работает расчет страницы.
Вы бы лучше поняли, о чем я говорю: [Сайт, где эта проблема][1]

[1]: не актуально

Спасибо за Ваш ответ, brgds


html jquery css opera
person Slammer    schedule 25.04.2010    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Вам нужно понимать разницу между $(document).ready() и обычным событием загрузки (с которым в основном будет работать $(window).load()).

Событие «документ готов» происходит, когда весь документ готов для взаимодействия с JavaScript — загружаются все HTML и JavaScript. Скорее всего загружаются не все изображения, загружается и применяется ли CSS несколько неопределенно (браузеры делают это немного по-другому).

По этим причинам делать что-то, что требует вычисления макета/размера из $(document).ready(), не очень хорошая идея. В этом случае вы попытаетесь прочитать размер документа до того, как все изображения будут загружены, поэтому вы получите размер как есть, прежде чем браузер узнает, какой размер будет, когда он узнает размер всех изображений.

Кажется, здесь все работает нормально в Opera, если я уверен, что это делается в событии загрузки, а не в document.ready.

(Другая проблема заключается в том, что Opera не загружает изображения внутри содержимого display:none — до тех пор, пока вы фактически не измените отображение так, чтобы изображения требовались. Это повышает производительность загрузки, но иногда означает, что пользователю приходится ждать загрузки изображений при отображении дополнительного содержимого.)

person hallvors    schedule 26.04.2010
comment
Спасибо за ваш комментарий. Как я уже говорил ранее, я в первую очередь попробовал $(window).load(function({}) не дожидаясь загрузки DOM. Ваш последний абзац был очень полезен. Я исправил свою проблему, добавив в КОНЕЦ файла if (jQuery .browser.opera) {$('body').show();} - person Slammer; 26.04.2010

arrow_upward
0
arrow_downward

Попробуйте это на самом деле:

//recalculate height when page is fully loaded
 $(window).load(function(){
  $('body').show();
  recalculateHeight("#center_div");
 });

скорее, чем:

$(document).ready(function(){
 $(window).load(function(){
  $('body').show();
  recalculateHeight("#center_div");
 });
});
person Sarfraz    schedule 25.04.2010
comment
нет, этот способ тоже не работает. Я пробовал это раньше ... но обнаружил, что если я поставлю предупреждение между $('body').show(); и пересчитатьВысоту(#center_div); после закрытия этого предупреждения высота окна становится такой, какой я хотел (но все еще не понимаю, использует ли Opera свой кеш или, может быть, из-за задержки) :? - person Slammer; 25.04.2010

arrow_upward
0
arrow_downward

Лучшее решение — указать высоту и ширину ваших изображений в html. Тогда вам не нужен window.load, потому что они не изменятся по высоте.

Также я думаю, что Сарфраз говорил о том, что вы не должны помещать window.load внутри document.ready. Они оба должны быть на одном уровне.

person Alistair    schedule 25.04.2010