0

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

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 回答