2016-02-12 3 views
0

У меня есть этот один шаблон, над которым я работаю, в котором у меня есть несколько div, которые динамически изменяются javascript (они копируют высоту других divs):Обновление Javascript при изменении размера браузера + Как сделать это менее болезненным

$('#postThumbnailGhost').height($('.wp-post-image').height()); 
$('#post').css('min-height', $('.wp-post-image').height()); 

Он работает нормально, пока не попытаюсь изменить размер браузера. Сценарий не вызывается снова.

Итак, почему бы не перезагрузить полную страницу, если размер окна изменился?

Хорошо, тогда:

$(window).resize(function(){location.reload();}); 

Но, когда страница перезагружается, он мигает много, как несколько содержимое динамически генерируется.

Например, два divs, которые я упоминал ранее. У меня также есть встроенная временная шкала, которая обновляется каждый раз, когда страница загружается.

Итак, вопрос в том, как я могу сделать перезагрузку безболезненной (без каких-либо мерцаний).

Кстати, мой Jquery-звонок находится в нижнем колонтитуле, то же самое для всех моих скриптов.

/! \ Когда-нибудь, когда я перезагрузить страницу на моем сайте, кажется, что Javascript не работает вообще, или называли слишком поздно, в результате чего на шаблоне быть перепутано (может быть, потому что это в сноске?)

++ JSFiddle не имеет проблемы с изменением размера с динамическим div. Вы можете изменить размер рендеринга без каких-либо проблем. JSFiddle of the project, without window load script

++ Link of the project live

Séane

ответ

3

Там нет необходимости перезагрузки при изменении размеров окна, просто размер:

function updateHeights() { 
    $('#postThumbnailGhost').height($('.wp-post-image').height()); 
    $('#post').css('min-height', $('.wp-post-image').height()); 
} 
updateHeights(); 
$(window).on("resize", updateHeights); 
+0

Это великолепно, спасибо. –

1

Почему вы перезагрузите страницу, почему не просто повторить тот же код при изменении размера?

$(window).resize(function(){ 
    $('#postThumbnailGhost').height($('.wp-post-image').height()); 
    $('#post').css('min-height', $('.wp-post-image').height()); 
}); 

Хотя, вероятно, было бы умным, чтобы поставить этот код в функцию, так что это не повторится, и просто вызовите функцию по мере необходимости.

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

  • Нет связанных вопросов^_^