Question

我有以下Javascript代码，可以调整产品图片的大小并将它们放在一个框中。这个代码在调用onload时工作得很好，但我有一个ajax调用，它返回20多个产品。当我在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";

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

Answer 2

如果您愿意使用jQuery，那么您可以将您的逻辑附加到ajax调用的“success”处理程序。有关示例，请参阅此处this discussion。

Javascript图像大小调整＆amp;定位

2 个答案: