纯javascript的进度图像加载程序仅当用户单击提交html表单时

Progress image loader in pure javascript Only when user clicks on submit html form

本文关键字：单击 用户 提交 html 表单 程序 javascript 加载 图像      更新时间：2023-09-26

我只想在用户单击我的html表单上的submit时显示progress image loader，但此时progress image loader也会在用户reloads打开页面时显示。。。所以当用户reloads访问页面时，我想仅将事件隔离为点击的按钮(submit)，而不显示progress image loader。我提供了一个例子来展示我在纯javascript中寻找的东西。

感谢您的帮助。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <meta name="pragma" content="no-cache">
  <meta name="robots" content="noindex, nofollow">
  <title>BackUp</title>
  <link rel="stylesheet" type="text/css" href="backup.css">
  <script language="javascript" type="text/javascript">
  function StartProgress() {
    ProgressImage = document.getElementById('progress_image');
    document.getElementById("progress").style.display = "block";
    setTimeout("ProgressImage.src = ProgressImage.src", 100);
    return true;
  }
  </script>
</head>
<body onUnload="StartProgress()">
<div class="mainbox">
  <div class="box1">
    <span class="title">BackUp</span>
  </div>
  <div class="cleardiv"></div>
  <div class="box2">
    <form onSubmit="return StartProgress()" action="backup.php" method="post">
    <input class="backup_button" type="submit" name="submit" value="BackUp">
    </form>
  </div>
  <div class="cleardiv"></div>
  <div style="display: none" id="progress"><img id="progress_image" src="css/busy.gif" alt="BackUp in progress..."></div>
  <div class="cleardiv"></div>
</div>
</body>
</html>

你可以试试这个：

把你的表格改成这样：

<form id='form1' action="backup.php" method="post">
    <input type='button' onclick='submitForm()' value="BackUp" />
</form>

submitForm函数：

function submitForm() {
    StartProgress();
    var form1 = document.getElementById('form1');
    form1.submit();
    //setTimeout(function(){
    //  form1.submit();
    //}, 1000);
}
相关文章：