在窗口调整大小时触发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

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

小提琴