在提交表单时添加加载gif
Adding a loading gif when submitting form?
当我的代码计算时,我希望提交按钮从现在的"RUN"变为我所拥有的加载gif。现在,当我单击RUN按钮时,我还需要运行一个特定的脚本,该脚本计算各种数据并将其返回到页面。我写了一个保存其他两个函数的函数,并按顺序调用它们。我甚至添加了第三个函数来恢复提交按钮,但我似乎不明白。
该网站是www.fsaesim.com/simulation.html,这将是更容易看到的代码,但附加的是代码。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="framework.js"></script>
<script type="text/javascript">
function ShowCalculation() {
var results = Main($("#vehicleWeightTxt").val(), $("#tireChoiceSel").val(), $("#wheelBaseTxt").val(), $("#wheelRadiusTxt").val(), $("#trackWidthTxt").val(), $("#hcgTxt").val(), $("#weightDistributionTxt").val(), $("#shiftRpmTxt").val(), $("#ntTxt").val());
$('#outputTotalTime').empty();
$('#outputTotalPoints').empty();
$('#outputFuelUsed').empty();
$('#outputTimeOpenThrottle').empty();
$('#outputCorneringTimeTotal').empty();
$('#outputTotalStraightSectionTime').empty();
$('#outputTotalNumberOfShifts').empty();
$('#outputTractionLimitedDuration').empty();
$('#outputMeanLongAccel').empty();
$('#outputMeanHorsepower').empty();
$('#outputAccelerationTime').empty();
$('#outputMeanAccelerationLongAccel').empty();
$('#outputAccelerationTractionLimitedTime').empty();
$('#outputAccelerationTotalPoints').empty();
$('#outputAccelerationWideOpenThrottlePercentage').empty();
$('#outputAccelerationShifts').empty();
$('#outputAccelerationTrapSpeed').empty();
$('#outputTotalEnduranceTime').empty();
$('#outputTotalEndurancePoints').empty();
$('#outputTotalEnduranceFuelUsed').empty();
$('#outputTotalWOTPercentage').empty();
$('#outputTotalEnduranceShifts').empty();
$('#outputTotalEnduranceTractionLimitedTime').empty();
$('#outputTotalEnduranceAcceleration').empty();
$('#outputSkidpadTime').empty();
$('#outputSkidpadPoints').empty();
$('#outputSkidpadVelocity').empty();
$('#outputSkidpadAcceleration').empty();
$('#outputAutocrossTime').empty();
$('#outputAutocrossPoints').empty();
$('#outputAutocrossTotalShifts').empty();
$('#outputAutocrossTractionLimitedTime').empty();
$('#outputAutocrossVelocity').empty();
$('#outputAutocrossWOTPercentage').empty();
$('#outputAutocrossLongitudinalAcceleration').empty();
$('#outputMaxHorsepower').empty();
$("#outputTotalTime").append(results.output1);
$("#outputTotalPoints").append(results.output2);
$("#outputFuelUsed").append(results.output3);
$("#outputTimeOpenThrottle").append(results.output4);
$("#outputCorneringTimeTotal").append(results.output5);
$("#outputTotalStraightSectionTime").append(results.output6);
$("#outputTotalNumberOfShifts").append(results.output7);
$("#outputTractionLimitedDuration").append(results.output8);
$("#outputMeanLongAccel").append(results.output9);
$("#outputMeanHorsepower").append(results.output10);
$("#outputMaxHorsepower").append(results.output27);
$("#outputAccelerationTime").append(results.output11);
$("#outputMeanAccelerationLongAccel").append(results.output12);
$("#outputAccelerationTractionLimitedTime").append(results.output13);
$("#outputAccelerationTotalPoints").append(results.output14);
$("#outputAccelerationWideOpenThrottlePercentage").append(results.output15);
$("#outputAccelerationShifts").append(results.output16);
$("#outputAccelerationTrapSpeed").append(results.output17);
$("#outputTotalEnduranceTime").append(results.output1);
$("#outputTotalEndurancePoints").append(results.output2);
$("#outputTotalEnduranceFuelUsed").append(results.output3);
$("#outputTotalWOTPercentage").append(results.output4);
$("#outputTotalEnduranceShifts").append(results.output7);
$("#outputTotalEnduranceTractionLimitedTime").append(results.output8);
$("#outputTotalEnduranceAcceleration").append(results.output9);
$("#outputSkidpadTime").append(results.output18);
$("#outputSkidpadPoints").append(results.output19);
$("#outputSkidpadVelocity").append(results.output20);
$("#outputSkidpadAcceleration").append(results.output21);
$("#outputAutocrossTime").append(results.output22);
$("#outputAutocrossPoints").append(results.output23);
$("#outputAutocrossTotalShifts").append(results.output24);
$("#outputAutocrossTractionLimitedTime").append(results.output25);
$("#outputAutocrossVelocity").append(results.output26);
$("#outputAutocrossWOTPercentage").append(results.output4);
$("#outputAutocrossLongitudinalAcceleration").append(results.output9);
}
function mouseClick() {
document.getElementById("submitButton").src = "images/loading.gif";
}
function revertBack() {
document.getElementById("submitButton").src = "images/simulationSubmit.png";
}
function simulationEvents() {
mouseClick();
ShowCalculation();
revertBack();
}
</script>
<center><a href=""><img src="images/simulationSubmit.png" alt="" id="submitButton" onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="simulationEvents(); return false;" /></a></center>
由于所有的处理都是在javascript中完成的,这将占用您的脚本,直到它完成。
Javascript不是多线程的,它每次只执行一个任务,直到该任务完成。
通常,当您在处理表单时看到动画gif时,说明页面正在使用AJAX或类似的东西。数字运算是在服务器端使用PHP或Python之类的东西进行的。
动画只是在javascript等待服务器端脚本的返回时运行。
你也许可以在本教程中绕过它,但在这种情况下,这似乎有点过头了。最简单的方法可能是将表单数据发送到服务器端脚本,或者只是处理处理过程中没有动画的情况。
编辑:如果你想学习如何做AJAX,这里有一个使用jQuery的教程,你的网站已经在加载了。
相关文章:
- 如何在onclick事件执行代码时在ImageButton上设置加载gif
- Ajax 加载 GIF 不会在成功时删除
- 加载 gif 图像未显示在 IE 和镶边中
- 单击时重播 GIF 动画/重新加载 GIF
- 是否可以在页面开始加载之前显示加载gif/image
- 网站在php中加载gif
- 在页面加载时重新加载gif图像
- Javascript使用加载gif的最简单/最优雅的方式
- 只想在页面上未加载初始数据时显示加载gif
- 鼠标离开后强制重新加载gif
- 动画加载gif与iframes加载
- 使用 AJAX 加载其他页面时加载 GIF 图像
- 导航时加载 GIF 图像
- 如何在页面加载时异步加载图像并在加载时显示加载 GIF
- 在 AJAX 完成时加载 GIF
- 如何在请求进入 Ajax 时显示加载 gif
- 显示加载.gif同时使用 jQuery 上传文件
- Javascript - 加载GIF冻结,同时将图像绘制到画布(Phonegap/Cordova)
- JavaScript 在 Iframe 加载时显示加载 gif
- 继续加载.gif在操作 DOM 时进行动画处理