0

我一直在为这个问题苦苦挣扎一段时间。我安装了 OpenCart 1.5.2.1，在结帐阶段我有几个步骤必须在后台完成。在发生这种情况时，我正在尝试显示一个简单的 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>

任何帮助表示赞赏。提前致谢。

4

1 回答 1

1

可能的原因有以下三种：

  1. 您试图在 DOM 准备好之前获取元素（使用 $(document).ready)）；

  2. Ajax 执行速度太快，因此您无法观察加载程序。

  3. 你在使用 css/image 时遇到了麻烦。要测试它摆脱 javascript 并查看它是否适用于静态内容（手动添加类“加载”）。

在以下示例中，我将 ajax 的执行推迟了 2 秒：

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

于 2012-04-09T14:58:40.987 回答