Как закончить мой ajax-loader.gif?

Question

Я использую OpenCart, и у меня есть серия вызовов AJAX, которые скрыты для пользователя и уходят немного времени на загрузку. Я хочу показать gj-ajax-loader, но я новичок и не знаю, как писать код. Запуск AJAX начинается, когда они нажимают кнопку «Checkout» и отправляются на страницу проверки. Ajax-loader.gif будет на странице проверки и закончится при запуске AJAX, и соответствующая информация заполнит div на странице.

Я действительно почти ничего не знаю о AJAX. Пожалуйста, сообщите мне для получения более подробной информации, если они вам понадобятся.

Моя попытка показа/скрытия фонового изображения в Div в:

<script language="Javascript" type="text/javascript"> 
    $('#confirm.checkout-heading').css("background-image", "url('../image/ajax-loader.gif')"); 
    $.ajax({ 
    url: 'opencart/index.php?route=checkout/checkout', 
    success: function(data) {}, 
    failure: function(){}, 
    complete: function(){ $('#confirm.checkout-heading').css("background-image", "none"); } 
    }); 
</script> 

CSS:

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

Answer 1

если вы используете JQuery, то это может закончиться либо с успехом, ошибки или любом случае. .

$('#loader').show(); 
$.ajax({ 
    url: 'backend.php', 
    success: function(data) {}, 
    failure: function(){}, 
    complete: function(){ $('#loader').hide(); } 
});