我有一个 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 不够了解,不知道如何解决这个问题。感谢您的帮助...
最佳答案
您的 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");
}
});
关于Javascript结束ajax-loader.gif,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9945114/