Javascript 图像大小和定位

Question

我有以下 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。有什么办法可以让这个函数等待所有图像加载完毕？

Answer 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";

你应该做一些等待所有图像加载的事情......