当窗口大小改变时触发jQuery函数，但页面加载时不触发。

Question

我找到了一段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();

});

有人有修复这个问题的想法吗？ 谢谢！ -Thom

- thom_p

---

可能是重复的问题：jQuery resize函数在页面加载时不起作用 - davidcondrey

Answer 1

$(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

- adeneo

---

嗨adeneo，感谢您的建议。不幸的是，它仍然无法正常工作。看着你的fiddle，我注意到唯一与我的代码不同的是你给.img-holder分配了固定的宽度和高度。当我也将固定尺寸分配给类时，它确实起作用。但我不能这样做，因为它会防止图像在调整窗口大小时重新调整大小。这就是我一开始使用jQuery居中图像的全部原因。有什么办法可以让它工作吗？谢谢！ - thom_p

你是做错了什么还是我完全不知道你在做什么？如果将图像大小设置为100％，它应该按比例缩放到父元素，并且 .img-holder 元素需要一个大小，如果你要在 JavaScript 中进行调整大小的计算，则必须获取宽度和高度，否则在大多数情况下它只会返回“自动”。 - adeneo

Answer 2

同时绑定加载和调整大小事件，如下所示：

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

希望这能有所帮助。

- anti000gravity

Answer 3

试试这个：

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);

- Ridcully

---

@ComputerArts 嗯，Adeneo 更快 :) - Ridcully

嗨Ridcully，感谢您的建议。当我为img-holder类分配固定尺寸时，您的代码有效。但是当我不这样做时，我仍然遇到同样的问题。我不想为img-holder分配固定尺寸的原因是我在img上使用了max-width：100％，以便它们可以调整大小以适应较小的窗口。有没有办法让jQuery在不为img-holder div分配尺寸的情况下工作？谢谢！ - thom_p

@thom_p：我认为Kobi是正确的，你应该在load事件上首先调用adoptToSize()，而不是ready事件，因为（正如jquery自豪地宣称的那样）ready事件在页面HTML加载完成之前就被触发了，而此时还没有加载所有的图片和其他内容。此时（图片未加载），图片的大小尚未知道，因此计算将无法正确进行。当load事件被触发时，一切都应该已经加载完毕，因此图片的大小应该是可用的。 - Ridcully

Answer 4

为什么不呢

$(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
    });
}

- VVV

Answer 5

试试这个。你不能像这样调用一个回调函数。

$(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
});

});

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

});

- Musfiqur rahman

Answer 6

请记住 $(document).ready 发生在 DOM 就绪后，但在所有内容加载之前。

当您首次触发调整大小函数时，您的 <img /> 可能尚未加载...
尝试使用文档的 load 事件或图像的 load 事件。

这里最好的解决方案是给图像一个固定大小：

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

或者：

.img-holder img {width:800px;height:519px;}

- Kobi

---

好的，CSS方面还没有进展。我相信你可以使用display:table-cell来垂直对齐内容，但我认为你需要更多的元素。 - Kobi

嗨Kobi，你说得对，当我给图像或div一个固定的大小时，它是有效的。然而，我之所以依赖于jQuery来居中图像，是因为我在img上使用了max-width:100%，这样它们会在窗口变小时调整大小。但是，如果我给img或div分配固定的尺寸，它就不再在窗口变小时调整大小了。有没有办法让jQuery在不必给图像或div指定固定大小的情况下工作？谢谢！ - thom_p

@thom_p - 你好 - 尝试使用load事件：$(document).on('load')而不是$(document).ready()。 - Kobi

Answer 7

尝试类似这样的内容：

+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);

- nkh