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

});

有人知道如何解决这个问题吗？ 谢谢！

-汤姆

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

Answer 2

试试这个：

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

Answer 3

为什么不

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

Answer 4

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

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

});

Answer 5

尝试类似：

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

Answer 6

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

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

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

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

或：

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

Answer 7

同时绑定 load 和 resize 事件，如下所示：

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

希望这会有所帮助。