Анимация загрузки jQuery не отображается
Я пытаюсь следовать ответу здесь, чтобы создать анимацию загрузки с помощью jQuery: https://stackoverflow.com/a/1964871/23334971
К сожалению, у меня не отображается анимация загрузки, и я не знаю почему.
Я использую Python/django для своего серверного сценария.
Вот мой минимальный воспроизводимый пример:
HTML:
// 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();
setTimeout(function() {
$.ajax({
url: '',
type: 'get',
data: {
number1: $('#number1').val(),
number2: $('#number2').val(),
},
success: function(response) {
$('#result').html('<b>Result: </b>' + response.result);
}
});
}, 3000);
});
});.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.sstatic.net/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;
}<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "script.js"></script>
<link rel = "stylesheet" href = "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>
Ответы 3
Код работает. Вы можете этого не увидеть, поскольку процесс происходит за очень короткое время. Чтобы увидеть, вы можете использовать функцию setTimeout().
я протестировал ваш код. и он показывает, что я загружаю gif
Я заменил свой скрипт на:
$(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>Я не уверен, почему мой исходный код не работает, но этот работает.
1 кредит
Ответы Chatgpt не допускаются при переполнении стека.
@HariHarker Это не ответ в чате. Я использовал чатгпт, чтобы получить правильный код, и убедился, что он работает. Обратите внимание, что никто больше не предоставил рабочий код в ответ на мой вопрос (до того, как я ответил).
С помощью современного CSS, используя grid, мы можем упростить CSS и «суперцентрировать» значок на теле (установить полную высоту/ширину просмотра) во время процесса загрузки и изменить размер изображения до любого желаемого размера; здесь я использовал 5em, но это может быть что угодно.
Вероятно, zindex даже не понадобится, поскольку мы скрываем все остальное здесь, поэтому я закомментировал это - его также можно поместить в «основной» контейнер, чтобы у вас также мог быть верхний/основной/нижний колонтитул страницы и т. д.
Я также снова выключил параметр .always() Not ethe setTimeout здесь, просто чтобы имитировать задержку.
$(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.sstatic.net/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>
Мой код Python выполняется около 5-10 секунд.