Javascript结束ajax-loader.gif

我有一个动画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>

---

我已经尝试过调试，并且我确定它被卡在

complete:function（）

上，但是我对js不够了解，不知道如何解决这个问题。谢谢你的帮助…

就像蝎子王子说的那样，试着把旋转器藏在完整的屏幕上。如果我的gif容器上有一个唯一的id，它会是这样的

complete: function(){ $('#myGifContainer').hide(); }

添加如下所示的类：

<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').addClass("fffClass"); }
    });
</script>

---

您的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");
    }
});

---

下面是使用ajaxStart和ajaxStop处理程序的示例之一

// prepare the form when the DOM is ready 
$(document).ready(function() {   
   // Setup the ajax indicator  
   $('body').append('<div id="ajaxBusy"><p><img src="images/loading.gif"></p></div>');      
   $('#ajaxBusy').css({    
       display:"none",    
       margin:"0px",    
       paddingLeft:"0px",    
       paddingRight:"0px",    
       paddingTop:"0px",    
       paddingBottom:"0px",    
       position:"absolute",    
       right:"3px",    
       top:"3px",    
       width:"auto"    
    });
 });

// Ajax activity indicator bound to ajax start/stop document events
$(document).ajaxStart(function(){   
    $('#ajaxBusy').show(); 
}).ajaxStop(function(){   
    $('#ajaxBusy').hide();
});

//在DOM就绪时准备表单
$（文档）.ready（函数（）{
//设置ajax指示器
$（'body'）。追加（'p>
'）；
$（'#ajaxBusy'）.css（{
显示：“无”，
边距：“0px”，
填充左：“0px”，
paddingRight:“0px”，
paddingTop:“0px”，
填充底部：“0px”，
位置：“绝对”，
右：“3px”，
顶部：“3px”，
宽度：“自动”
});
});
//绑定到Ajax开始/停止文档事件的Ajax活动指示器
$（文档）.ajaxStart（函数（）{
$（'ajaxBusy'）.show（）；
}).ajaxStop（函数（）{
$（'#ajaxBusy'）.hide（）；
});

什么是“它卡住了”可以尝试在完整的eventhandler中对“confirm”元素执行.hide（）操作吗？另一个选项是使用@scibuff“SyntaxError:function语句需要名称”根据我的调试器…@Scorpion Prince，我真的需要查看示例代码-我对编写javascript几乎一无所知…仅供参考：如果您在CSS文件中定义样式，而不是使用jQuery操作内联样式，那么只需添加和删除CSS类就更好了。更容易维护代码。

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

// prepare the form when the DOM is ready 
$(document).ready(function() {   
   // Setup the ajax indicator  
   $('body').append('<div id="ajaxBusy"><p><img src="images/loading.gif"></p></div>');      
   $('#ajaxBusy').css({    
       display:"none",    
       margin:"0px",    
       paddingLeft:"0px",    
       paddingRight:"0px",    
       paddingTop:"0px",    
       paddingBottom:"0px",    
       position:"absolute",    
       right:"3px",    
       top:"3px",    
       width:"auto"    
    });
 });

// Ajax activity indicator bound to ajax start/stop document events
$(document).ajaxStart(function(){   
    $('#ajaxBusy').show(); 
}).ajaxStop(function(){   
    $('#ajaxBusy').hide();
});