Получить мгновенное обновление смены ширины изображения

Question

У меня есть изображение (одна буква). Изображение можно изменить, нажав другие кнопки букв (функция change_letter). Каждая буква имеет разную ширину (от 18px для «I» до 35px для «W»). Я хочу сосредоточить все буквы внутри div и использовать

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

для этого. Однако значение ширины, которое я получаю, всегда совпадает с значением ширины предыдущего изображения. Итак, после того, как я сменил букву с «W» (35px) на «I» (18px), «I» получает margin-left: -17.5px (от W), вместо -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, добавив случайное число в запросе

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