函數未在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事件在文檔加載之后但圖像加載之前運行，因此您將沒有所有元素的正確大小。

Answer 2

該功能可能正在執行（您可以通過簡單的警報進行仔細檢查），但是您正在“修復”的圖像可能尚未加載。 您可以使用window.onload事件或監聽圖像加載事件，如下所示：

var scale = function() {
    // rescale
};

$('#imagecontainer img').each(function() {
    this.complete ? scale.call(this) : $(this).load(scale);
});

Answer 3

嘗試這個：

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