javascript - 仅当用户单击提交 html 表单时,纯 javascript 中的进度图像加载器

标签 javascript html image loader

我想仅当用户单击我的 html 表单上的提交时才显示进度图像加载器,但目前进度图像加载器<当用户重新加载页面时,也会显示...所以我想将事件仅隔离为单击的按钮(提交),而无需当用户重新加载页面时显示>进度图像加载器。我提供了一个示例来展示我在纯 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>

提交表单函数:

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

关于javascript - 仅当用户单击提交 html 表单时,纯 javascript 中的进度图像加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28794639/

相关文章:

html - 如何让文本区域占据 div 中的剩余高度?

image - 为什么我的文本仍然环绕在 float 的 div 下?

python - 绘制彼此靠近的多条线时出现白点

javascript - 通过 CSS 模块生成的类名以一种奇怪的方式生成

javascript - 在 html 标签中打印 JavaScript 变量

javascript - can-model 无法从 .json 文件获取数据

php - 如何将这些数据存储在mysql中

c - 需要帮助创建测验应用程序 - 如何放置图像?? Xcode(苹果手机)

Javascript 返回循环总和

javascript - 将 <object/> 声明转换为 javascript ActiveXObject