函数不能在jquery文件就绪时执行

Question

我有一个javascript函数,可以根据周围的容器大小(依赖于窗口大小)调整大小并使图像居中.我使用jquery作为js框架.该函数需要在文档加载后(文档就绪)执行,但也可以在用户更改浏览器大小时执行,即我在html文档中运行以下内容:

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

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

但由于某些未知原因,该功能仅在用户调整浏览器大小而不是加载后执行.任何人都可以帮忙吗？

(我的功能是以下知识...)

function fixImageSizes()
{
var cw = $('#imagecontainer').width();
var ch = $('#imagecontainer').height();
$('#imagecontainer img').each(function()
{
    var iw = $(this).css('width');
    var ih = $(this).css('height');
    if (parseInt(iw) < parseInt(cw)) // image width < viewport
    {
        var newih = Math.ceil(parseInt(ih) * parseInt(cw) / parseInt(iw)) + 'px';
        var newimargint = '-' + Math.ceil(parseInt(newih)/2) + 'px';
        var newimarginl = '-' + Math.ceil(parseInt(cw)/2) + 'px';
        $(this).css({'width':cw,'height':newih,'margin-left':newimarginl,'margin-top':newimargint});
    }
    if (parseInt(ih) < parseInt(ch)) // image height < viewport
    {
        var newiw = Math.ceil(parseInt(iw) * parseInt(ch) / parseInt(ih)) + 'px';
        var newimargint = '-' + Math.ceil(parseInt(ch)/2) + 'px';
        var newimarginl = '-' + Math.ceil(parseInt(newiw)/2) + 'px';
        $(this).css({'width':newiw,'height':ch,'margin-left':newimarginl,'margin-top':newimargint});
    }
    if (parseInt(ih) > parseInt(ch) && parseInt(iw) > parseInt(cw)) // viewport smaller than image, shrink image
    {
        if (parseInt(ch) - parseInt(ih) > parseInt(cw) - parseInt(iw)) // difference is less on height
        {
            var newiw = Math.ceil(parseInt(iw) * parseInt(ch) / parseInt(ih)) + 'px';
            var newimargint = '-' + Math.ceil(parseInt(ch)/2) + 'px';
            var newimarginl = '-' + Math.ceil(parseInt(newiw)/2) + 'px';
            $(this).css({'width':newiw,'height':ch,'margin-left':newimarginl,'margin-top':newimargint});
        } 
        else // difference less on width
        {
            var newih = Math.ceil(parseInt(ih) * parseInt(cw) / parseInt(iw)) + 'px';
            var newimargint = '-' + Math.ceil(parseInt(newih)/2) + 'px';
            var newimarginl = '-' + Math.ceil(parseInt(cw)/2) + 'px';
            $(this).css({'width':cw,'height':newih,'margin-left':newimarginl,'margin-top':newimargint});
        }
    }

});

Answer 1

您应该使用load事件而不是ready事件.

该ready事件的文档加载之后运行,但图像加载之前,所以你不会有所有元素的正确尺寸.