Javascript圖像尺寸和定位

我下面的JavaScript代碼調整產品圖像大小並將它們放在一個盒子中。這個代碼在調用onload時工作得很好，但我有一個返回20個產品的ajax調用。當我Ajax調用後在onload後調用這個函數，它會調整任何圖像是165x165px方，不管它的proportions.Here是JavaScript：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有什麼辦法讓這個功能直到所有的圖像加載被加載？

來源

2012-06-29 Phil Young

我認爲你應該使用變量更多，它們很棒 – Esailija

附註：DOM調用（例如'document.getElementsByTagName'）很貴。將結果存儲在變量中會有所幫助。 –

叫我瘋了，但它看起來像它調整到165，因爲你告訴它：'resizeProductImages（165,165，'roller'）;' –

如果您正在使用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-29 11:00:26 iwiznia

如果您願意使用jQuery，那麼您可以將您的邏輯附加到ajax調用的「成功」處理程序。例子見this discussion。

來源

2012-06-29 10:51:33 davidethell

Javascript圖像尺寸和定位

回答

相關問題