Home>

I think that it is quite common to put something like a load screen before submitting, but it is made like this.

<div>
    <div>
        <img src = "/ load.png">
        <p>Now Loading ...</p>
    </div>
</div>
<form>
<!-Discount love->
</form>
<button type = "button">Send</button>
/* Load screen * /
.loading {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 120%;
    background-color: rgba (0, 0, 0, 0.3);
}
.loading .messsage {
    text-align: center;
    color: #ffffff;
    font-weight: bold;
}
.loadIMG img {
    width: auto;
    height: 150px;
}
$('# submit'). on ('click', function () {
      $(". loading"). css ("display", "flex");
      $("# form"). submit ();
});

With this code, the load screen is displayed on the PC without any problem, but if it is a smartphone, the submit fires before the load screen is displayed for some reason, and the page transitions. Is it that the process is too fast and the page transitions before displaying? I hope someone can help you.

[Added]
By the way, the reason for not using show () is because it uses flexbox in CSS. Is there a cause around here?

  • Answer # 1

    I didn't know the detailed cause after all, so I decided to delay the submit process.

    $('# submit'). on ('click', function () {
          $(". loading"). css ("display", "flex");
          setTimeout (function () {
              $("# form"). submit ();
          }, 100);
    });

    Now you can get a load screen on your smartphone. It's just a bad solution. Please let me know if there are other good solutions ...

Related articles