单击提交按钮时显示加载 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>

这是我上传的图片url

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

希望你能帮帮我

Answer 1

在布局文件中使用 div 和 display: none，并在需要时将其设为 display:block

<div style="z-index: 5000; display:none;" id="loadingDiv">
    <table style="margin: 0px auto;">
        <tr>
            <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>
        </tr>
    </table>
</div>

$('#usp_form').submit(function() {
    // javascript way
    document.getElementById("loadingDiv").style.display = 'block';
    // jquery way
    $('#loadingDiv').show();  
});

更新

layout level files can be any of following:

layout.html
index.html
header.html
footer.html

您可以试试其他 gif 图片，例如 https://i.stack.imgur.com/rBLb3.gif

Answer 2

您已在您的 img 中添加了 'style="display:none"'，但在您正在执行的代码中：

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

你应该这样做：

$('#img').css('display', 'inline-block');

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

Show Loading Gif On Click Submit Button

javascript

forms

wordpress

loading

form-submit