Анимация загрузки jQuery не отображается

Я пытаюсь следовать приведенному здесь ответу, чтобы создать анимацию загрузки с помощью jQuery: https://stackoverflow.com/a/1964871/23334971

К сожалению, у меня не отображается анимация загрузки, и я не уверен, почему.

Я использую Python/django для моего скрипта на стороне сервера.

Я не уверен, как создать минимальный рабочий пример, потому что код на стороне сервера занимает несколько секунд. Может быть, просто заменить его на задержку? Я полный профан, так что, возможно, в моем коде что-то явно не так:

Вот мой HTML:

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="{% static 'calculator/script.js' %}"></script>
        <link rel="stylesheet" href="{% static 'stylesheet.css' %}">
    </head>
    <body>
        <article>
            <form id="calculatorForm">
                <label for="num1">Numbers</label>
                <input type="number" name="number1" id="number1">
                <input type="number" name="number2" id="number2"><br />
                <button type="submit" role="button">Calculate</button><br /><br />
            </form>
            <div class="modal"></div>
            <div id="result"></div>
        </article>
    </body>
</html>

stylesheet.css: (просто скопировано и вставлено из ответа на stackoverflow по ссылке)


.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url('https://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

script.js:

// this is the code i've copied and pasted from the SO answer
$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading"); },
    ajaxStop: function() { $body.removeClass("loading"); }    
});


// this is the code I'm using to connect to my back-end python code and return a result
$(document).ready(function() {
    $('#calculatorForm').on('submit', function(event) {
        event.preventDefault(); 
        $.ajax({
            url: '', 
            type: 'get', 
            data: {
                number1: $('#number1').val(),
                number2: $('#number2').val(),  
            },
            success: function(response) {
                $('#result').html('<b>Result: </b>' + response.result); 
            }
        });
    });
});

код работает. Вы можете не заметить этого, потому что процесс происходит за очень короткое время. Вы можете использовать функцию setTimeout(), чтобы увидеть.

Я заменил свой скрипт на:

$(document).ready(function() {
    var $body = $("body");

    $('#calculatorForm').on('submit', function(event) {
        event.preventDefault();
        $body.addClass("loading");
            $.ajax({
                url: '', 
                type: 'get', 
                data: {
                    number1: $('#number1').val(),
                    number2: $('#number2').val(),  
                },
                success: function(response) {
                    $('#result').html('<b>Result: </b>' + response.result); 
                },
                error: function(xhr, status, error) {
                    $('#result').html('<b>Error: </b>' + error); 
                },
                complete: function() {
                    $body.removeClass("loading");
                }
            });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Я не уверен, почему мой оригинальный код не работает, но этот работает.

Кредит: ChatGPT

С помощью современного CSS, используя grid, мы можем упростить CSS и "суперцентрировать" иконку на теле (установив полную высоту/ширину просмотра) во время процесса загрузки, а размер изображения выбрать любой; здесь я использовал 5em, но это может быть что угодно.

Вероятно, zindex даже не нужен, так как мы скрываем остальное здесь, поэтому я закомментировал это - это также может быть помещено в контейнер "main", так что у вас может быть заголовок страницы/главная/футер и т.д. также.

Я также снова переключил OFF с помощью .always() Not ethe setTimeout exists here just to simulate a delay.

$(function() {
  $('#calculatorForm').on('submit', function(event) {
    event.preventDefault();
    $("body").addClass("loading");
    const data = {
      number1: $('#number1').val(),
      number2: $('#number2').val()
    };
    setTimeout(function() {
      $.ajax({
        url: '',
        type: 'get',
        data: data
      }).done(function(response) {
        $('#result').html('<b>Result: </b>' + response.result);
      }).always(function() {
        $("body").removeClass("loading");
      });
    }, 3000);
  });
});
body {
  height: 100vh;
  width: 100vw;
}

.modal {
  display: none;
  /*  z-index: 1000;*/
  height: 5em;
  width: 5em;
  background-image: url('https://i.stack.imgur.com/FhHRx.gif');
  background-repeat: no-repeat;
  background-size: 100%;
}

body.loading {
  overflow: hidden;
  display: grid;
  place-items: center;
}

body.loading article {
  display: none;
}

body.loading .modal {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<article>
  <form id="calculatorForm">
    <label for="number1">Numbers</label>
    <input type="number" name="number1" id="number1">
    <input type="number" name="number2" id="number2"><br />
    <button type="submit" role="button">Calculate</button><br /><br />
  </form>
  <div id="result"></div>
</article>
<div class="modal"></div>

Вернуться на верх