Ajax-loader.gif 在页面加载后结束
Ajax-loader.gif ends once page loads
我已经为这个问题苦苦挣扎了一段时间了。 我安装了OpenCart 1.5.2.1,在结帐阶段,我有几个步骤必须在后台完成。 当这种情况发生时,我正在尝试显示一个简单的 ajax-loader.gif,我希望它在页面完成处理后消失。 目前,ajax加载器.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>
任何帮助,不胜感激。 提前谢谢。
有三个可能的原因:
-
您正在尝试在 DOM 准备就绪之前获取元素(使用 $(document).ready));
-
Ajax 执行速度太快,因此您无法观察加载程序。
-
你在使用css/image时遇到了麻烦。要测试它,请摆脱javascript并查看它是否适用于静态内容(手动添加类"加载")。
在下面的示例中,我将 ajax 的执行推迟了 2 秒:
http://jsfiddle.net/webdevel/Dd3B7/1/
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- 如何在生成下载文件时显示加载动画
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Emberjs应用程序加载在除Index之外的所有路由上
- 在chrome.tabs.onCreated之后加载HTML页面
- 单击F5时如何停止页面加载
- 如何查找部分加载何时开始和结束
- 切片图层加载开始和结束时的传单火灾事件
- YouTube API 视频结束加载一个函数
- Ajax-loader.gif 在页面加载后结束
- 如何在结束加载嵌套的html页面(对象中的页面)后激发事件
- 在完整日历中加载事件时,如何指定开始日期和结束日期
- 如何确保IE8中body标记结束前javascript的加载顺序
- 开始加载屏幕时,功能开始和结束加载屏幕时,完成.(Javascript)
- 设置DIV的大小,而不必等待页面加载结束
- 如何在Javascript中创建一个等待函数结束的加载器
- 什么会使HTML/JS/PHP源在加载时突然结束/停止
- 脚本结束后,Div不会重新加载到原始位置
- 如何在html页面加载结束时执行任何特定的操作