JSP должен выводить HTML.Изображения в HTML должны отображаться с использованием тега <img>.Этот тег имеет атрибут src, который должен указывать на общедоступный веб-ресурс.Вот пример:
<img src="progress.gif">
При открытии страницы JSP с помощью http://example.com/context/page, предполагается, что файл progress.gif присутствует в http://example.com/context/progress.gif (то есть в корневом каталогепапка webcontent).
Теперь вы хотите отображать изображение только при нажатии кнопки отправки, чтобы дождаться завершения ответа.Вы можете сделать это, сначала скрыв изображение с помощью CSS и повторно отобразив его с помощью JavaScript.
HTML:
<input type="submit" onclick="showProgress()">
<img id="progress" src="progress.gif">
CSS:
#progress {
display: none;
}
JavaScript
function showProgress() {
document.getElementById('progress').style.display = 'block';
}
Когда ответ будет завершен, он обновит страницу с помощьюновая целевая страница и изображение процесса «автоматически» исчезнут.
Обновление : вот как может выглядеть полный файл JSP:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
#progress {
display: none;
}
</style>
<script>
function showProgress() {
document.getElementById('progress').style.display = 'block';
}
</script>
</head>
<body>
<form>
<input type="submit" onclick="showProgress()">
<img id="progress" src="progress.gif">
</form>
</body>
</html>
Или когда CSS / JS выводится в отдельный файл (рекомендуется):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form>
<input type="submit" onclick="showProgress()">
<img id="progress" src="progress.gif">
</form>
</body>
</html>
См. Также: