0

商品画像のサイズを変更してボックスの中央に配置する次のJavascriptコードがあります。このコードは、onloadを呼び出すと完全に正常に機能しますが、さらに20個の製品を返すajax呼び出しがあります。ajax呼び出しの後、およびonloadの後にこの関数を呼び出すと、比率に関係なく、画像のサイズが165x165pxの正方形に変更されます。Javascriptは次のとおりです。

function resizeProductImages(optimumHeight, optimumWidth, className)
{

images = document.getElementsByTagName('img');

for(var i=0;i<images.length;i++)
{

    if(images[i].className == className)
    {

        images[i].removeAttribute("width");
        images[i].removeAttribute("height");
        images[i].style.left = "0px";
        images[i].style.top = "0px";

        h = images[i].height;
        w = images[i].width;

        if(h > w)
        {

            images[i].height = optimumHeight;

            images[i].style.position = "absolute";
            images[i].style.display = "block";

            var scaledown = optimumHeight/h;
            var realWidth = scaledown * w;

            var realHeight = optimumWidth - realWidth;
            var gaps = realHeight / 2;

            images[i].style.left = gaps+"px";

        }
        else if(w > h)
        {

            images[i].width = optimumWidth;

            images[i].style.position = "absolute";
            images[i].style.display = "block";

            var scaledown = optimumWidth/w;
            var realHeight = scaledown * h;

            var realWidth = optimumHeight - realHeight;
            var gaps = realWidth / 2;

            images[i].style.top = gaps+"px";

        }
        else if(h == w)
        {

            images[i].height = optimumHeight;
            images[i].width = optimumWidth;

        }

    }

}

}

function resizeProductCategoryImages()
{

resizeProductImages(165, 165, 'roller');

}

なぜ何かアイデアはありますか？

編集

コメントからアドバイスを受け取り、DOM呼び出しを変数に置き換えて、上記の新しいコードを投稿しました。

さらに編集

これは、関数が呼び出されたときに画像がまだ読み込まれていないため、画像のサイズが0、0であるためです。すべての画像が読み込まれるまでこの関数を待機させる方法はありますか？

4

2 に答える 2

1

Jqueryを使用している場合は、次を使用できます。

$('img.classOfYourImages').load(function(){
  resizeProductImages(165, 165, 'roller');
});

jQueryを使用していない場合は、次のようにすることができます。

var img = new Image();
img.onload = function() { 
   // Code goes here
};
img.src = "http://path/to/image.jpg";

すべての画像が読み込まれるのを待つ何かをする必要があります...

于 2012-06-29T11:00:26.623 に答える
0

jQueryを使用する場合は、ロジックをajax呼び出しの「成功」ハンドラーにアタッチできます。例については、こちらの説明を参照してください。

于 2012-06-29T10:51:33.370 に答える