jQuery removeAttr ('style') не работает в Firefox и Safari

Question

Я сделал функцию загрузки изображения, и я определяю размеры изображения с помощью jQuery, чтобы при загрузке изображения он вписывался в его содержимое с div , Когда изображение обнаружено, jQuery применяет некоторый CSS, чтобы он вписывался в div, а затем центрировал его правильно, все зависит от того, является ли изображение прямоугольным, квадратным и т. Д. Также есть кнопка удаления. Проблема заключается в том, что если я загружу изображение, удаляю его, а затем загружаю другое, CSS, используемый для предыдущего изображения, применяется к текущему, что делает его странным в Firefox и Safari.

Мой вопрос: есть ли способ полностью удалить стили из предыдущего изображения, чтобы следующее загруженное изображение могло быть пересчитано? Я добавил $('#logoPreview').removeAttr('style'); в функцию удаления кнопки удаления, и стиль attr фактически удаляется в HTML, но если вы проверите элемент, стили остаются и применяются к следующему загруженному изображению. Работает отлично в Chrome, но не в Firefox или Safari.

Любые предложения?

Спасибо заранее!

Вот код:

// Visualize logo 
function readURL(input) { 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 

    reader.onload = function(e) { 
     $('#logoPreview').attr('src', e.target.result); 

     $('#logoPreviewWrapper').css('display', 'block'); 
     $('span.button.upload').css('display', 'none'); 
     $('span.button.remove').css('display', 'block'); 
     $('idTwo input').css('display', 'none'); 

     var wLogo = $('#logoPreview').width(); 
     var hLogo = $('#logoPreview').height(); 

     // Position & resize square images 
     if (wLogo == hLogo) { 
      $('#logoPreview').css('height', '52px'); 
      $('#logoPreview').css('width', 'auto'); 

      var wLogoResize = $('#logoPreview').width(); 

      $('#logoPreview').css('marginTop', '-26px'); 
      $('#logoPreview').css('marginLeft', -wLogoResize/2); 
     } 

     // Position & resize horizontal rectangular images 
     if (wLogo > hLogo) { 
      $('#logoPreview').css('width', '154px'); 
      $('#logoPreview').css('height', 'auto'); 

      var hLogoResize = $('#logoPreviewWrapper img').height(); 

      $('#logoPreview').css('marginTop', -hLogoResize/2); 
      $('#logoPreview').css('marginLeft', '-77px'); 
     } 

     // Position & resize vertical rectanglular images 
     if (wLogo < hLogo) { 
      $('#logoPreview').css('height', '52px'); 
      $('#logoPreview').css('width', 'auto'); 

      var wLogoResize = $('#logoPreviewWrapper img').width(); 

      $('#logoPreview').css('marginTop', '-26px'); 
      $('#logoPreview').css('marginLeft', -wLogoResize/2); 
     } 
    }; 

    reader.readAsDataURL(input.files[0]); 
    } 
} 

$('.idTwo input[type="file"]').change(function() { 
    readURL(this); 
}); 

// The Remove Button 
$('span.button.remove').click(function() { 
    $('#logoPreview').removeAttr('style'); 

    $(this).css('display', 'none'); 
    $('input[type="number"]').val(1); 
    $('#logoPreviewWrapper').css('display', 'none'); 

    $('.idTwo input').attr('value', ''); 

    $('span.button.upload').css('display', 'block'); 
    $('.quantity.buttons_added input[type="number"]').prop('disabled', false); 
    $('input[value="-"]').prop('disabled', false); 
    updateValues(); 
}); 

Answer 1

Я получил его !!

Оказалось, что порядок, в котором Chrome и Firefox «читают» этот код, не совпадают. Chrome делает его сверху вниз и в Firefox все это асинхронная так это:

$('#logoPreview').attr('src', e.target.result); 

В Firefox происходит после того, как я получаю ширину загруженного изображения. вот как я это решил. Решение было начать делать сослагательное наклонение после этого образа было загружено, а removeAttr(''style) даже нет необходимости в кнопке удалить, например, так:

function readURL(input) { 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 

    reader.onload = function(e) { 
     var logoPreview = $('#logoPreview'); 
     logoPreview.attr('src', e.target.result); 

     logoPreview.on('load', function() { 
      $('#logoPreviewWrapper').css('display', 'block'); 
      $('span.button.upload').css('display', 'none'); 
      $('span.button.remove').css('display', 'block'); 
      $('idTwo input').css('display', 'none'); 

      var wLogo = logoPreview.width(); 
      var hLogo = logoPreview.height(); 

      // Position & resize square images 
      if (wLogo == hLogo) { 
       logoPreview.css('height', '52px'); 
       logoPreview.css('width', 'auto'); 

       var wLogoResize = logoPreview.width(); 

       logoPreview.css('marginTop', '-26px'); 
       logoPreview.css('marginLeft', -wLogoResize/2); 
      } 

      // Position & resize horizontal rectangular images 
      if (wLogo > hLogo) { 
       logoPreview.css('width', '154px'); 
       logoPreview.css('height', 'auto'); 

       var hLogoResize = $('#logoPreviewWrapper img').height(); 

       logoPreview.css('marginTop', -hLogoResize/2); 
       logoPreview.css('marginLeft', '-77px'); 
      } 

      // Position & resize vertical rectanglular images 
      if (wLogo < hLogo) { 
       logoPreview.css('height', '52px'); 
       logoPreview.css('width', 'auto'); 

       var wLogoResize = $('#logoPreviewWrapper img').width(); 

       logoPreview.css('marginTop', '-26px'); 
       logoPreview.css('marginLeft', -wLogoResize/2); 
      } 
     }); 
    }; 

    reader.readAsDataURL(input.files[0]); 
    } 
} 

$('.idTwo input[type="file"]').change(function() { 
    readURL(this); 
}); 

// The Remove Button 
$('span.button.remove').click(function() { 
    $(this).css('display', 'none'); 
    $('input[type="number"]').val(1); 
    $('#logoPreviewWrapper').css('display', 'none'); 

    $('.idTwo input').attr('value', ''); 

    $('span.button.upload').css('display', 'block'); 
    $('.quantity.buttons_added input[type="number"]').prop('disabled', false); 
    $('input[value="-"]').prop('disabled', false); 
    updateValues(); 
}); 

Спасибо в любом случае !! : D