Я работаю над веб-страницей, используя Python Flask, и я хочу, чтобы веб-страница отображала изображение во время периода загрузки после того, как пользователь отправил форму. Я попытался установить для элемента «loading_gif» значение «none» до тех пор, пока форма не будет нажата, а затем функция javascript вверху должна сделать его отображаемым, пока фоновое содержимое становится скрытым.
Проблема в что когда я загружаю веб-страницу, изображение уже там. После отправки формы фоновое содержимое исчезает, а изображение остается, поэтому функция JS, похоже, работает правильно. Я просто не уверен, почему изображение не скрыто в начале.
В разделе img {display: none} я пробовал использовать loading_gif вместо img и #loading_gif, но ни один из них не работает .
<!DOCTYPE html>
<html lang = "en">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script type = "text/javascript">
function loading(){
document.getElementById("loading_gif").style.display = 'block';
document.getElementById("content").style.display = 'none';
}
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
img {
display: none;
}
</style>
<body>
<img id = "loading_gif" src="{{url_for('static', filename='image.gif')}}">
<div id = "content">
<h1><center>Track Your Packages!</center></h1>
<center>UPS, USPS, or FedEx</center>
<form method = "POST">
<input type = "text", placeholder = "Add Tracking Number", name = "AddTrackingNum">
<input class = "btn btn-primary" type = "submit", onclick = "loading(); return False;">
</form>
<form method = "POST">
<input type = "text", placeholder = "Remove Tracking Number", name = "RemoveTrackingNum">
<input class = "btn btn-primary" type = "submit">
</form>
<body>Last update: {{current_dateTime}}</body>
<div class="container" style="min-height:100% width:80%">
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block body %}{% endblock %}
</div>
<table>
<tr>
<th>Company</th>
<th>Tracking Number</th>
<th>Location</th>
<th>Status</th>
<th>As of </th>
<th>Scheduled Delivery Date</th>
</tr>
{%for i in tableDict%}
<tr>
{%for y in tableDict[i]%}
<td>{{y}}</td>
{%endfor%}
{%endfor%}
</tr>
</table>
</div>
</body>
</html>