jquery動態圖像調整大小沒有采取正確的圖像尺寸

Question

由於某種原因，當我點擊這個畫廊時，我創建時，分配給CSS的尺寸並不總是在新圖像加載到.product-image容器。我認爲這是由於在圖像仍在加載時分配css屬性導致的，因爲它似乎只發生在較大的圖像上。一旦再次點擊「.more-views a」，就會計算出正確的尺寸。

function loadNewImage(newurl) { 

     jQuery(".col-main .product-image a").attr("href",newurl); 
     jQuery(".col-main .product-image img").attr("src", newurl); 
     jQuery(".col-main .product-image img").css({'width': '','height':''}); 

    } 

    function resizeImageByAspect(ele) { 
     var maxWidth = 465; 
     var maxHeight = 436; 
     var ratio = 0; 
     var width = ele.width(); 
     var height = ele.height(); 
     ele.css("width", width); 
     ele.css("height", height); 

     if (width > maxWidth) { 
      ratio = maxWidth/width; 
      ele.css("width", maxWidth); 
      ele.css("height", height * ratio); 
      height = height * ratio; 
      width = width * ratio; 
     } 

     if (height > maxHeight) { 
      ratio = maxHeight/height; 
      ele.css("height", maxHeight); 
      ele.css("width", width * ratio); 
      width = width * ratio; 
     } 
    } 
    jQuery(document).ready(function(){ 
     resizeImageByAspect(jQuery(".col-main .product-image img")); 

     jQuery(".more-views a").click(function(event){ 
      jQuery(".col-main .product-image img").fadeOut("fast", function(){ 


       loadNewImage(jQuery(event.target).parent().attr('href')); 

       resizeImageByAspect(jQuery(".col-main .product-image img")); 
      }).delay(500); 

      jQuery(".col-main .product-image img").fadeIn("fast"); 
      return false; 
     }); 


    }); 

Answer 1

我建議在設置新的src屬性之前在映像上添加一個負載處理程序。讓這個負載處理程序運行你的resize代碼。

function loadNewImage(newurl) { 

    jQuery(".col-main .product-image a").attr("href",newurl); 
    jQuery(".col-main .product-image img").unbind('load').load(function() { 
     resizeImageByAspect($(this)); 
    }).attr("src", newurl); 
    jQuery(".col-main .product-image img").css({'width': '','height':''}); 

} 

Answer 2

看到這個舊的計算器問題：Browser-independent way to detect when image has been loaded

韋德通過這些意見，然後再決定是否要嘗試和使用的事件處理程序來監視你的圖像加載完成你做的大小之前調整。