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()上了，但我不是很精明，知道如何解决这个问题。谢谢你的帮助...

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

Answer 2

像蝎子王子说的那样，试着将旋转器完全隐藏起来。如果我在我的gif容器上有一个唯一的id，那就是这样的。

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

Answer 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;
}

Answer 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();
});

Javascript结束ajax-loader.gif

4 个答案:

我建议你这样做