$ (Окно) .load (функция () {}); проблема в опере - PullRequest
Новая
       13

$ (Окно) .load (функция () {}); проблема в опере

4 голосов
/ 25 апреля 2010

Мне нужно пересчитать основную высоту тела, чем ждать загрузки всего контента (изображений) и только потом показывать его посетителю сайта.
Для этого я использовал 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 вычисление высоты работает, но кажется, что тело не прячется, потому что все изображения загружаются как обычно, они должны. В Opera обе функции не работают. Не загружается страница, когда загружен весь контент, не работает расчет страниц.
Вы бы лучше поняли, о чем я говорю: [Сайт, где эта проблема] [1]

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

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

Ответы [ 3 ]

3 голосов
/ 26 апреля 2010

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

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

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

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

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

0 голосов
/ 25 апреля 2010

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

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

0 голосов
/ 25 апреля 2010

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

//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");
 });
});
...