Javascript结束ajax-loader.gif

Question

我有一个 gif 动画，它应该一直运行到页面完成加载。 gif 正在样式表中处理，我想要一些 javascript 在页面加载以隐藏 gif 时更改背景元素。这是代码:

<script language="Javascript" type="text/javascript">
    $('#confirm .checkout-heading').css("background", "#fff url('../image/ajax-loader.gif') 98% 50% no-repeat");
    $.ajax({
    url: 'checkout/checkout.php',
    success: function(data) {},
    failure: function(){},
    complete: function(){ $('#confirm .checkout-heading').css("background", "#fff"); }
    });
</script>

风格:

#confirm .checkout-heading {
    background: #fff url('../image/ajax-loader.gif') 98% 50% no-repeat;

我试过调试，我确定它卡在 complete: function() 上，但我对 js 不够了解，不知道如何解决这个问题。感谢您的帮助...

Answer 1

您的 javascript 代码看起来不错，尽管很难维护您的代码和样式，因为您混合了两者......无论如何。您的语法错误一定指向其他地方，因为根据您的代码，它应该没有任何问题。

我建议你这样做

这将使维护代码变得更加容易，因为样式将与代码完全分离。您的代码将仅操作 CSS 类。

有两个与此相关的 CSS 定义:

#confirm .checkout-heading {
    background-color: #fff;
}

#confirm .checkout-heading.loading
    background-image: url('../image/ajax-loader.gif');
    background-position: 98% 50%;
    background-repeat: no-repeat;
}

然后将您的 Javascript 代码编写为:

var el = $("#confirm .checkout-heading").addClass("loading");
$.ajax({
    url: 'checkout/checkout.php',
    success: function(data) {},
    failure: function() {},
    complete: function() {
        el.removeClass("loading");
    }
});