Ajax-loader.gif一旦頁面加載結束

我一直在努力解決這個問題一段時間了。我安裝了OpenCart 1.5.2.1，在結帳階段，我有幾個步驟必須在後臺完成。發生這種情況時，我試圖顯示一個簡單的ajax-loader.gif，並且我希望它在頁面完成處理後消失。目前，在Ajax的loader.gif沒有顯示...Ajax-loader.gif一旦頁面加載結束

這裏是我的javascript：

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

樣式表：

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

頁：

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

任何幫助表示讚賞。先謝謝了。

來源

2012-04-09 blackessej

有三種可能的原因：

您正試圖獲得元素之前DOM已準備就緒（使用$（文件）。就緒））;
Ajax執行速度太快，所以你不能觀察loader。
你有麻煩的CSS /圖像。要測試它擺脫JavaScript，看看它是否適用於靜態內容（手動添加類「加載」）。

在以下例子中我已經推遲AJAX的執行2秒鐘：

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

來源

2012-04-09 14:58:40

感謝。我已經證實這個問題似乎來自＃3。當我放下'.loading'類並將加載器圖像設置爲'.checkout-heading'的背景時，圖像就會出現，但是一旦頁面加載完畢，圖像就不會消失，而當我手動添加類'.loading'時，什麼也沒有發生，沒有圖像。另外，當我添加'（使用$（document）.ready））''函數時，我只是在頁面上獲得一個「0」。 – blackessej 2012-04-10 14:36:55

Ajax-loader.gif一旦頁面加載結束

回答

相關問題