Question

我正在为购物车（Gambio GX2商店软件）进行一些改进。当客户更新产品数量时，他应该在购物车更新时看到加载gif。这是通过将类.modal（请参阅CSS）应用于正文（使用JQuery的.addClass）来完成的。之后，执行一些ajax调用，最后提交购物车并重新加载页面。

这在Firefox中完美运行，但在其他浏览器中存在问题。在Chrome中，首先执行所有Ajax调用，然后才能看到gif加载动画（页面重新加载时）。在Safari中，gif动画根本不会出现。

如果我在调试器中设置了一个断点，那么我可以立即看到gif动画（一步一步执行），但只要我让它运行正常的过程，似乎订单不正确。 / p>

简而言之：如何确保在执行ajax调用之前应用视觉更改？

我有以下功能（简化为例）

JS

$('.button_cart_refresh').live('click', function (event) {

    $("body").addClass("loading"); // Show "loading" gif

    var coo_quantity_checker = new GMOrderQuantityChecker();
    var t_result = coo_quantity_checker.check_cart(); // Trigger Ajax calls

    if (t_result == true) {
        $('#cart_quantity').trigger("submit", [true]);
    } else {
        $("body").removeClass("loading");
    }
    return false;
});

CSS （请参阅https://stackoverflow.com/a/1964871/1131823）

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .4 )
    url('img/ajax-sheep-loader.gif')
    50% 50%
    no-repeat;
}

body.loading .modal {
    display: block;
}

Answer 1

我猜测.check_cart()涉及同步ajax调用。这意味着浏览器将完全停留等待它完成;这就是“同步”在这种情况下的含义。

所以，首先：你不应该使用同步ajax，如果你可以帮助它（你几乎总是可以）。

那说（很明显），你可以在短暂的超时后进行你的ajax调用和后续工作：

$('.button_cart_refresh').live('click', function (event) {

    $("body").addClass("loading"); // Show "loading" gif

    var coo_quantity_checker = new GMOrderQuantityChecker();
    setTimeout(function() {
      var t_result = coo_quantity_checker.check_cart(); // Trigger Ajax calls

      if (t_result == true) {
        $('#cart_quantity').trigger("submit", [true]);
      } else {
        $("body").removeClass("loading");
      }
    }, 15);
    return false;
});

此外，您应该停止使用.live()，因为它已被弃用多年。

在执行Ajax调用之前，应该可以看到对DOM的更改

1 个答案: