Показать загрузку GIF при нажатии кнопки «Отправить» - PullRequest
Новая
       13

Показать загрузку GIF при нажатии кнопки «Отправить»

0 голосов
/ 01 октября 2019

Я использую плагин загрузки изображений для своего веб-сайта, и когда пользователи нажимают на кнопку «Отправить» на мобильных устройствах, они не видят никакого прогресса, поэтому они нажимают кнопку «Отправить» снова и снова, и я получаю слишком много одинаковых сообщений, я хочу показать загрузку 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/

надеюсь, вы поможете мне

Ответы [ 2 ]

2 голосов
/ 01 октября 2019

Используйте 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

0 голосов
/ 01 октября 2019

Вы добавили 'style = "display: none"' в свой img, но в коде, который вы делаете: 

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

Вы должны сделать: 

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