Функция jQuery запускается при изменении размера окна, но не при загрузке страницы

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

Моя проблема в том, что прямо сейчас это не работает, если я сначала не изменю размер окна. Поэтому, если я просто загружу страницу, div не будет центрирован, если я не изменю размер окна вручную.

Это, конечно, не идеально. Поэтому я пытаюсь найти способ обойти это. Но мои навыки jQuery очень ограничены, я застрял прямо сейчас.

Вот страница, над которой я работаю: http://dev.manifold.ws/test2/ ( попробуйте изменить размер окна, чтобы увидеть, что я описываю)

И вот jQuery, который я использую:

$(document).ready(function(){

$(window).resize(function(){

    $('.img-holder').css({
        position:'absolute',
        left: ($(window).width() - $('.img-holder').outerWidth())/2,
        top: ($(window).height() - $('.img-holder').outerHeight())/2
    });

});
// This is suppose to initially run the function but it doesn't seem to work
$(window).resize();

});

Кто-нибудь знает, как это исправить? Спасибо!

-Том


jquery centering resize onload fluid-layout
person thom_p    schedule 16.08.2012    source источник
comment
возможный дубликат функция изменения размера jQuery не работает при загрузке страницы   -  person davidcondrey    schedule 09.06.2015

Ответы (7)


arrow_upward
5
arrow_downward 

$(document).ready(function(){
    doResize();
    $(window).on('resize', doResize);
});

function doResize() {
    $('.img-holder').css({
        position:'absolute',
        left: ($(window).width() - $('.img-holder').outerWidth())/2,
        top: ($(window).height() - $('.img-holder').outerHeight())/2
    });
}

FIDDLE

person adeneo    schedule 16.08.2012
comment
Привет Аденео, спасибо за ваше предложение. К сожалению, это все еще не работает. Глядя на вашу скрипку, я замечаю, что единственное, что отличается от моего кода, это то, что вы назначили фиксированную ширину и высоту держателю .img. И это действительно работает, когда я также присваиваю классу фиксированные размеры. Но я не могу этого сделать, потому что это предотвращает изменение размера изображения при изменении размера окна. В этом вся суть, почему я использовал jQuery для центрирования изображения в первую очередь. Любая идея, как я могу заставить это работать? Спасибо! - person thom_p; 16.08.2012
comment
Ты что-то делаешь не так, или я понятия не имею, что ты делаешь? Если вы установите размер изображения на 100%, он должен масштабироваться до родительского элемента, а элемент .img-holder должен иметь размер, если вы собираетесь получить ширину и высоту для выполнения расчетов изменения размера в вашем javascript, в противном случае он будет в большинстве случаев случаи просто возвращают auto. - person adeneo; 16.08.2012

arrow_upward
0
arrow_downward

Попробуй это:

function adoptToSize() {
    $('.img-holder').css({
        position:'absolute',
        left: ($(window).width() - $('.img-holder').outerWidth())/2,
        top: ($(window).height() - $('.img-holder').outerHeight())/2
    });
}

$(document).ready(adoptToSize);
$(window).resize(adoptToSize);
person Ridcully    schedule 16.08.2012
comment
@ComputerArts Аденео был еще быстрее :) - person Ridcully; 16.08.2012
comment
Привет Ridcully, спасибо за ваше предложение. Ваш код работает, когда я назначаю фиксированные размеры классу img-holder. Но когда я этого не делаю, я все еще застрял с той же проблемой. Причина, по которой я не хочу назначать фиксированные размеры держателю img, заключается в том, что я использую max-width: 100% для img, чтобы они изменяли размер для меньшего окна. Есть идеи, как заставить jQuery работать без назначения размеров div-элементам img-holder? Спасибо! - person thom_p; 16.08.2012
comment
@thom_p: я думаю, что Коби прав, что вы должны сделать первый вызов acceptToSize() в событии загрузки, а не в событии готовности, потому что (как с гордостью заявляет jquery) событие готовности запускается, как только HTML-страница загружается до загрузки всех изображений и прочего. На данный момент (изображение не загружено) размер изображения еще не известен, поэтому расчеты будут работать некорректно. Во время запуска события загрузки все должно быть загружено, поэтому размер изображения должен быть доступен. - person Ridcully; 18.08.2012

arrow_upward
0
arrow_downward

Почему бы нет

$(document).ready(function() { 
    resize();
});

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

function resize() {
    $('.img-holder').css({
        position:'absolute',
        left: ($(window).width() - $('.img-holder').outerWidth())/2,
        top: ($(window).height() - $('.img-holder').outerHeight())/2
    });
}
person VVV    schedule 16.08.2012

arrow_upward
0
arrow_downward

Попробуй это. Вы не можете вызвать функцию обратного вызова, подобную этой.

$(документ).готовый(функция(){

$(окно).изменить размер(функция(){

$('.img-holder').css({
    position:'absolute',
    left: ($(window).width() - $('.img-holder').outerWidth())/2,
    top: ($(window).height() - $('.img-holder').outerHeight())/2
});

});

$('.img-holder').css({
    position:'absolute',
    left: ($(window).width() - $('.img-holder').outerWidth())/2,
    top: ($(window).height() - $('.img-holder').outerHeight())/2
});

});

person Musfiqur rahman    schedule 16.08.2012

arrow_upward
0
arrow_downward

Попробуйте что-то вроде:

+function($, window){
  var resizeWin = function(){
      $('.img-holder').css({
          position:'absolute',
          left: ($(window).width() - $('.img-holder').outerWidth())/2,
          top: ($(window).height() - $('.img-holder').outerHeight())/2
      });
  }

  $(function(){ resizeWin() });
  $(window).bind('resize',resizeWin);
}(jQuery, window, undefined);
person nkh    schedule 16.08.2012

arrow_upward
0
arrow_downward

Помните, что $(document).ready происходит после того, как модель DOM готова, но до загрузки всего содержимого.

Ваш <img /> мог не загрузиться при первом запуске функции изменения размера...
Попробуйте использовать событие load документа или событие загрузки изображения.

Однако лучшее решение здесь — придать изображению фиксированный размер:

<img src="img/test.jpg" style="width:800px;height:519px;" />

or:

.img-holder img {width:800px;height:519px;}
person Kobi    schedule 16.08.2012
comment
Хорошо, не слишком далеко ушел с CSS. Я почти уверен, что вы можете использовать display:table-cell для вертикального выравнивания содержимого, но я думаю, вам понадобится еще несколько элементов. - person Kobi; 16.08.2012
comment
Привет, Коби, ты прав, это работает, когда я задаю фиксированный размер изображению или элементу div. Однако причина, по которой я полагаюсь на jQuery для центрирования изображения, заключается в том, что я использую максимальную ширину: 100% для img, чтобы они изменяли размер, когда окно уменьшалось. Но если я назначу фиксированные размеры для img или div, он больше не будет изменять размер, когда окно меньше. Любая идея, как заставить jQuery работать без необходимости задавать фиксированный размер изображения или div? Спасибо! - person thom_p; 16.08.2012
comment
@thom_p - Здравствуйте! Попробуйте использовать событие load: $(document).on('load вместо $(document).ready(. - person Kobi; 16.08.2012

arrow_upward
0
arrow_downward

Привяжите его одновременно к событию загрузки и изменения размера, как показано ниже:

$(window).on('load resize', function () {
// your code
});

Надеюсь это поможет.

person anti000gravity    schedule 28.04.2016