单击提交按钮时显示加载 Gif

Question

我正在为我的网站使用上传图片插件，当用户在移动设备上单击提交时，他们看不到任何进度，因此他们一次又一次地单击提交按钮，我收到太多相同的帖子，我想在他们显示加载 gif 图像时点击提交按钮，这是插件表单

<form id="usp_form" method="post" enctype="multipart/form-data" action="">

\\rest code here

<input type="submit" class="usp-submit" id="user-submitted-post" name="user-submitted-post" value="<?php esc_attr_e('Submit Post', 'usp'); ?>">

</form>

我已经尝试过在堆栈上找到这个，但没有用

<img src="https://www.punjabidharti.com/wp-content/plugins/wp-email/images/loading.gif" id="img" style="display:none"/ >

    <script type="text/javascript">

    $('#usp_form').submit(function() {

    $('#img').css('visibility', 'visible');

});</script>

这是我的上传图片网址

https://www.punjabidharti.com/upload-pictures/

希望你能帮助我

Answer 1

display: none在布局文件中使用 div并display:block在需要时制作<div style="z-index: 5000; display:none;" id="loadingDiv">&nbsp; &nbsp; <table style="margin: 0px auto;">&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="padding-top:200px;" align="center"><img src="https://www.punjabidharti.com/wp-content/plugins/wp-email/images/loading.gif" alt="loading image"/></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table></div>$('#usp_form').submit(function() {&nbsp; &nbsp; // javascript way&nbsp; &nbsp; document.getElementById("loadingDiv").style.display = 'block';&nbsp; &nbsp; // jquery way&nbsp; &nbsp; $('#loadingDiv').show();&nbsp;&nbsp;});更新layout level files can be any of following:layout.htmlindex.htmlheader.htmlfooter.html您可以尝试另一个 gif 图像，例如https://i.stack.imgur.com/rBLb3.gif

Answer 2

你已经在你的 img 中添加了 'style="display:none"' 但在你正在做的代码中：$('#img').css('visibility',&nbsp;'visible');你应该做：$('#img').css('display',&nbsp;'inline-block');