按钮内部的jQuery加载程序图像仅适用于Chrome

jQuery loader image inside button only works in Chrome

本文关键字：图像 适用于 Chrome 程序 加载 内部 jQuery 按钮      更新时间：2023-09-26

我尝试过这段代码，例如，在登录表单中显示一个提交按钮。当用户单击该按钮时，文本将变为"处理"，并显示一个加载程序图标。

这是引导程序按钮代码：

<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中都能工作？

我刚刚用fiddle尝试过，它很有效，甚至在firefox中也是如此。你能提供更多的代码吗？以及您用于图像的真实url。

此外，我更改了图像链接。

$(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();
  });
});
相关文章：