Question

I have an animated gif that’s supposed to run until a page completes loading. The gif is being handled in the stylesheet, and I want a bit of javascript to change the background element when the page loads to hide the gif. Here’s the code:

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

style:

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

I’ve tried debugging, and I’ve determined that it’s stuck on the complete: function(), but I’m not js savvy enough to know how to fix this. Thanks for any help…

Answer 1

Your javascript code seems fine, although makes it hard to maintain your code and styles, because you’re mixing both… Anyway. Your Syntax error must be pointing somewhere else, because based on your code, nothing should be wrong with it.

I suggest you do it this way

This will make it much easier to maintain your code, because styles will be completely separate from code. Your code will merely manipulate CSS classes.

Have two CSS definitions related to this:

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

And then write your Javascript code as:

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