Javascript图像大小和定位答案

【问题标题】：Javascript image sizing & positioningJavascript图像大小和定位
【发布时间】：2012-06-29 10:16:31
【问题描述】：

我有以下 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');

}

有什么想法吗？

编辑

我听取了 cmets 的建议，并用变量替换了 DOM 调用，并在上面发布了新代码。

进一步编辑

这是因为函数调用时图像尚未加载，因此图像的尺寸为0、0。有什么办法可以让这个函数等到所有图像都加载完毕？

【问题讨论】：

我认为你应该更多地使用变量，它们很棒
附注：DOM 调用（例如，document.getElementsByTagName）很昂贵。将结果存储在变量中会有所帮助。
叫我疯了，但在我看来它正在调整到 165，因为你告诉它：resizeProductImages(165, 165, 'roller');
@JoelEtherton 不，这是最大高度和最大宽度，我必须在那里添加数字，因为我使用不同的函数来调整不同大小的图像。它似乎匹配高度=宽度，但图像的高度大于宽度：S

标签： javascript css ajax image onload

【解决方案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";

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

【讨论】：

【解决方案2】：

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

【讨论】：