【问题标题】:spinning wheel when there's a weak signal信号微弱时旋转车轮
【发布时间】:2024-01-21 07:09:01
【问题描述】:

我有一个用户在他们的手机上填写的表格,在用户点击提交按钮后,我会弹出一个旋转轮,这样用户就不会再次点击提交按钮。

不幸的是,如果他们的手机信号较弱,则不会出现旋转轮,用户再次点击提交按钮。这会导致提交两个表单。

如果我在点击时隐藏按钮,我不会有相同的程序吗?真正的问题是,由于用户点击提交按钮时信号较弱,请求仍在处理中,对吧?还有哪些其他解决方案?

#divLoading
{
display : none;
}
#divLoading.show
{
display : block;
position : fixed;
z-index: 100;
background-image : url('spinner.gif');
background-color:#666;
opacity : 0.4;
background-repeat : no-repeat;
background-position : center;
left : 0;
bottom : 0;
right : 0;
top : 0;

}

<script>
$(document).ready(function(){
   $("#saveandsubmitbutton").click(function(){
       $("div#divLoading").addClass('show');
   });
});
</script>

【问题讨论】:

  • 预加载图片spinner.gif

标签: javascript jquery


【解决方案1】:

作为防止多次提交表单的额外保护措施,您应该在按下提交按钮后立即禁用它。

<input type="submit" onclick="this.disabled = true" value="Submit"/>

来源:How to submit form only once after multiple clicking on submit?

正如上面 JD6969 所评论的,您还可以预加载 spinner.gif 图像。我在另一个问题中找到了一个很好的方法:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['spinner.gif']).preload();

来源:Preloading images with jQuery

【讨论】:

    【解决方案2】:

    您应该预加载 spinner.gif。

    <img src="spinner.gif" id="spinner">
    
    #spinner { position:absolute; left:-9999px; top:-9999px }
    

    【讨论】:

      【解决方案3】:
      <script>
      $(document).ready(function(){
         $("#saveandsubmitbutton").click(function(){
             $("div#divLoading").addClass('show');
             $(document).off("click","#saveandsubmitbutton");
          });
        });
       </script>
      

      【讨论】: