Ajax-loader.gif endet einmal Seite lädt

Question

Ich habe seit einiger Zeit mit diesem Problem gekämpft. Ich habe OpenCart 1.5.2.1 installiert, und während der Checkout-Phase habe ich mehrere Schritte, die im Hintergrund ausgeführt werden müssen. Während dies geschieht, versuche ich eine einfache ajax-loader.gif anzuzeigen, und ich möchte, dass sie verschwindet, sobald die Seite fertig ist. Im Moment wird die Ajax-loader.gif nicht angezeigt ...

Hier ist mein javascript:

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

Sheet:

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

Seite:

<div class="breadcrumb"> 
    <?php foreach ($breadcrumbs as $breadcrumb) { ?> 
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a> 
    <?php } ?> 
    </div> 
    <h1><?php echo $heading_title; ?></h1> 
    <div class="checkout"> 
    <div id="checkout"> 
     <div class="checkout-heading"><?php echo $text_checkout_option; ?></div> 
     <div class="checkout-content"></div> 
    </div> 
    <?php if (!$logged) { ?> 
    <div id="payment-address"> 
     <div class="checkout-heading"><span><?php echo $text_checkout_account; ?></span></div> 
     <div class="checkout-content"></div> 
    </div> 
    <?php } else { ?> 
    <div id="payment-address"> 
     <div class="checkout-heading"><span><?php echo $text_checkout_payment_address; ?></span></div> 
     <div class="checkout-content"></div> 
    </div> 
    <?php } ?> 
    <?php if ($shipping_required) { ?> 
    <div id="shipping-address"> 
     <div class="checkout-heading"><?php echo $text_checkout_shipping_address; ?></div> 
     <div class="checkout-content"></div> 
    </div> 
    <div id="shipping-method"> 
     <div class="checkout-heading"><?php echo $text_checkout_shipping_method; ?></div> 
     <div class="checkout-content"></div> 
    </div> 
    <?php } ?> 
    <div id="payment-method"> 
     <div class="checkout-heading"><?php echo $text_checkout_payment_method; ?></div> 
     <div class="checkout-content"></div> 
    </div> 
    <div id="confirm"> 
     <div class="checkout-heading">Confirm Purchase</div> 
     <div class="checkout-content"></div> 
    </div> 
    </div> 

Jede Hilfe wird geschätzt. Danke im Voraus.

Answer 1

Es gibt drei mögliche Gründe:

1. Sie versuchen, Element zu erhalten, bevor DOM bereit ist (Verwendung $ (document) .ready));

2. Ajax Ausführung ist zu schnell, so dass Sie Loader nicht beobachten können.

3. Sie haben Probleme mit CSS/Bild. Um es zu testen, entfernen Sie JavaScript und sehen Sie, ob es auf statischem Inhalt funktioniert (fügen Sie die Klasse "loading" manuell hinzu).

Im folgenden Beispiel habe ich für 2 Sekunden Ausführung von Ajax verschoben:

http://jsfiddle.net/webdevel/Dd3B7/1/