獲取更改圖像寬度的即時更新

Question

我有一個圖像（一個字母）顯示。通過按其他字母按鈕（change_letter功能）可以更改圖像。每個字母都有不同的寬度（從「I」的18px到「W」的35px）。我希望將div中的所有字母居中並使用

margin-left:-width/2+"px" 

。但是，我得到的寬度值始終是前一幅圖像的寬度值。所以，在我將字母從「W」（35px）更改爲「I」（18px）後，「I」得到了餘量：-17.5px（W's），而不是-9px。

我不知道如何立即獲得新圖像的寬度。

change_letter: function(e) { 
    var txt = $(e.target).text().toLowerCase(); 

    if (this.typeFace !==2) { 
     $('#customlogo_layer2').attr('src',function(_,old_src){ 
     return old_src.replace(/_(\w)_/g,'_'+txt+'_'); 
     }); 

     $('#customlogo_layer3').attr('src',function(_,old_src){ 
     return old_src.replace(/_(\w)_/g,'_'+txt+'_'); 
     }); 

     var layer2img = document.getElementById('customlogo_layer2'); 
     var layer2width = layer2img.clientWidth; 
     var layer3img = document.getElementById('customlogo_layer3'); 
     var layer3width = layer3img.clientWidth; 

     $('#customlogo_layer2').css({"margin-left":-layer2width/2+"px","margin-right":-layer2width/2+"px"}); 
     $('#customlogo_layer3').css({"display":"block","margin-left":-layer3width/2+"px","margin-right":-layer3width/2+"px"}); 
     } 
    else 

Answer 1

嗨，我想，當你得到的圖像寬度圖像尚未加載

試試這個：

$('#customlogo_layer2').load(function(){ 

     var layerWidth = $(this)[0].clientWidth; 

     $(this).css({"margin-left":-layerWidth/2+"px","margin-right":-layerWidth/2+"px"}); 

    }) 

    $('#customlogo_layer3').load(function(){ 

     var layerWidth = $(this)[0].clientWidth; 

     $(this).css({"display":"block","margin-left":-layerWidth/2+"px","margin-right":-layerWidth/2+"px"}); 

    }) 

    $('#customlogo_layer2').attr('src',function(_,old_src){ 
    return old_src.replace(/_(\w)_/g,'_'+txt+'_'); 
    }); 

    $('#customlogo_layer3').attr('src',function(_,old_src){ 
    return old_src.replace(/_(\w)_/g,'_'+txt+'_'); 
    }); 

Answer 2

您可以通過添加隨機數刷新使用jQuery圖像的src在查詢中

$(imageobj).attr('src', $(imageobj) 
     .attr('src') + '?' + Math.random());