Javascript image sizing & positioning

Question

У меня есть следующий код Javascript, который изменяет размеры изображений продуктов и центрирует их в коробке. Этот код работает отлично, когда вызывается onload, но у меня есть вызов ajax, который возвращает еще 20 продуктов. Когда я вызываю эту функцию после вызова Ajax и после OnLoad, он изменяет любое изображение, чтобы быть 165x165px площади, независимо от того, это proportions.Here является 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 вызовы с переменной и выложили новый код, указанный выше.

Далее Edit

Это потому, что изображения не загружаются, когда вызовы функций и поэтому изображение имеет размеры 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. См. Здесь this discussion.