结束 ajax-loader.gif 的 Javascript答案

【问题标题】：Javascript to end ajax-loader.gif结束 ajax-loader.gif 的 Javascript
【发布时间】：2012-03-30 14:38:51
【问题描述】：

我有一个动画 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 的了解不够，不知道如何解决这个问题。感谢您的帮助...

【问题讨论】：

“卡住了”是什么意思
您可以尝试在完整的事件处理程序中对“确认”元素执行 .hide() 吗？另一种选择是使用.ajaxStart and .ajaxComplete handlers
@scibuff "SyntaxError: function statement requires a name" 根据我的调试器...
@Scorpion-Prince 我真的需要看看示例代码 - 我对编写 javascript 几乎一无所知...
仅供参考：如果您在 CSS 文件中定义样式而不是使用 jQuery 操作内联样式，只需添加和删除 CSS 类会更好。更容易维护您的代码。

标签： javascript css ajax

【解决方案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");
    }
});

【讨论】：

【解决方案2】：

就像 Scorpion-Prince 所说，尝试完全隐藏微调器。如果我的 gif 容器上有一个唯一的 id，它会是这样的。

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

【讨论】：

【解决方案3】：

添加如下类：

<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>

然后添加css

.fffClass{
background: #fff;
}

【讨论】：

【解决方案4】：

这是使用 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();
});

【讨论】：