按鈕中的jQuery加載器圖像只適用於Chrome

Question

我試過這段代碼，例如，一個提交按鈕顯示在登錄表單中。當用戶點擊該按鈕時，文本被更改爲「處理」並顯示一個加載器圖標。

這裏是引導按鈕的代碼：

<button id="loginbtn" type="submit" class="btn btn-success">Log in <span class="glyphicon glyphicon-log-in"></span></button> 

這是jQuery代碼：

$(document).ready(function(){ 
     $('input:visible:enabled:first').focus(); 

     /*Change button text and show loading icon*/ 
     $('#loginbtn').click(function() { 
      var img_route = "{{assetsUrl}}img/ajax-loader2.gif"; 
      $('#loginbtn').attr("disabled", true).html('<img src="'+img_route+'" style="float:left;margin-right:0.5em;" height="21" width="21"> Logging in ...'); 
      $(this).parents('form').submit(); 
     }); 
    }); 

這工作得很好Chrome上。但是，如果在使用Firefox或Safari時單擊該按鈕，則文本會發生更改，但加載圖標不會顯示。這是爲什麼發生？我如何使它在Safari和Firefox中都能正常工作？

Answer 1

我剛剛試過用fiddle，它的工作原理，即使在Firefox。是否有更多的代碼可以提供？以及您用於圖片的真實網址。

此外，我改變了圖像鏈接。

$(document).ready(function() { 
    $('input:visible:enabled:first').focus(); 

    /*Change button text and show loading icon*/ 
    $('#loginbtn').click(function() { 
    var img_route = "http://www.tutorialbunch.com/photoshop/animation/images/google-loading-icon11.gif"; 
    $('#loginbtn').attr("disabled", true).html('<img src="' + img_route + '" style="float:left;margin-right:0.5em;" height="21" width="21"> Logging in ...'); 
    $(this).parents('form').submit(); 
    }); 
});