Question

I have the following Javascript code which resizes product images and centres them in a box. This code works perfectly fine when called onload, but I have an ajax call which returns 20 more products. When I call this function after the ajax call and after the onload, it resizes any image to be a 165x165px square, regardless of it’s proportions.Here is the 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');

}

Any ideas why?

Edit

I took the advice from the comments and replaced DOM calls with a variable and posted the new code above.

Further Edit

It is because the images aren’t yet loaded when the function calls and therefore the image has the dimensions of 0, 0. Is there any way to make this function wait until all images are loaded?

Answer 1

If you are using Jquery you can use:

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

If you aren’t using jQuery, you can do something like:

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

You should do something that waits for all the images to be loaded…