0

周囲のコンテナサイズに基づいて画像のサイズを変更して中央に配置するjavascript関数があります（これはウィンドウサイズによって異なります）。私はjsフレームワークとしてjqueryを使用しています。この関数は、ドキュメントの読み込み後（ドキュメントの準備ができている場合）だけでなく、ユーザーがブラウザのサイズを変更した場合にも実行する必要があります。つまり、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});
        }
    }

});
4

3 に答える 3

5

loadイベントの代わりにイベントを使用する必要がありますready。

イベントはready、ドキュメントが読み込まれた後、画像が読み込まれる前に実行されるため、すべての要素のサイズが正しいとは限りません。

于 2012-08-27T10:44:42.480 に答える
1

関数はおそらく実行されていますが（簡単なアラートで再確認できます）、「修正中」の画像はまだロードされていない可能性があります。このイベントを使用するwindow.onloadか、次のように画像読み込みイベントを聞くことができます。

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

$('#imagecontainer img').each(function() {
    this.complete ? scale.call(this) : $(this).load(scale);
});
于 2012-08-27T10:51:03.190 に答える
0

これを試して：

$(window).load(function (){
    fixImageSizes();
});
于 2012-08-27T10:46:12.833 に答える