页面加载时候弹出 loading.gif 代码

最新推荐文章于 2022-01-05 17:17:19 发布

原创最新推荐文章于 2022-01-05 17:17:19 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#border #function #input

本文介绍了一个用于表单提交过程中的加载动画实现方案，并探讨了如何修复部分按钮无法正常显示加载状态的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<img id="submitImg" border="0" src="/test/images/loading.gif"
  style="position: absolute; display: none; visibility: visible">
<input id="checkSubmitFlg" name="checkSubmitFlg" value="0"
  style="display: none">
<script type="text/javascript"><!--
function submitTest() {
var checkSubmitFlg = window.document.getElementById("checkSubmitFlg").value;
if (checkSubmitFlg == '1') {
                alert("/u540e/u53f0/u6570/u636e/u5904/u7406/u4e2d/uff0c/u8bf7/u60a8/u7a0d/u7b49/u2026/u2026/u2026/u2026");
                return false;
        }
        window.document.getElementById("checkSubmitFlg").value="1";
var style="position: absolute;left:"+(window.screen.width/2-150)+"; top:"+(document.body.scrollTop+(document.body.clientHeight-150)/2)+";visibility:visible"
window.document.getElementById("submitImg").style.left=window.screen.width/2-150;
window.document.getElementById("submitImg").style.top=document.body.scrollTop+(document.body.clientHeight-150)/2;
window.document.getElementById("submitImg").style.display="";
window.status="/u4e1a/u52a1/u5904/u7406/u4e2d/u2026/u2026/u2026/u2026";
        return true;
}

//-->
</script>
<h:form onsubmit="return submitTest();">

以上是对画面改动代码实现

自己写一个js，直接调用就可以实现

但是有个bug就是在页面中有的按钮不实现loading图片加载，取消不了问题

一下是js代码

load();// onsubmit="return submitTest();"
function load() {
document.forms[0].attachEvent('onsubmit', submitTest);
document.forms[0].innerHTML = document.forms[0].innerHTML
   + "<img id='submitImg' border='0' src='/test/images/loading.gif'"
   + "style='position: absolute; display: none; visibility: visible'>"
   + "<input id='checkSubmitFlg' name='checkSubmitFlg' value='0'"
   + "style='display: none'> ";
}

function submitTest() {
var checkSubmitFlg = window.document.getElementById("checkSubmitFlg").value;
if (checkSubmitFlg == '1') {
  alert("/u540e/u53f0/u6570/u636e/u5904/u7406/u4e2d/uff0c/u8bf7/u60a8/u7a0d/u7b49/u2026/u2026/u2026/u2026");
  return false;
}
window.document.getElementById("checkSubmitFlg").value = "1";
var style = "position: absolute;left:"
   + (window.screen.width / 2 - 150)
   + "; top:"
   + (document.body.scrollTop + (document.body.clientHeight - 150) / 2)
   + ";visibility:visible"
window.document.getElementById("submitImg").style.left = window.screen.width / 2 - 150;
window.document.getElementById("submitImg").style.top = document.body.scrollTop
   + (document.body.clientHeight - 150) / 2;
window.document.getElementById("submitImg").style.display = "";
window.status = "/u4e1a/u52a1/u5904/u7406/u4e2d/u2026/u2026/u2026/u2026";
return true;
}