javascriptで読み込みが完了するまで確認後gifを表示

Question

私は送信ボタンを含むフォームを持っています。送信ボタンをクリックすると、確認のポップアップが表示されます。確認条件が満たされると、HTTPポストが行われます。しかし、時には投稿に時間がかかることがあります。このように、確認条件が満たされた後、投稿応答が返ってページが既に再読み込みされるまで、ロードGIFを表示したいと思います。

Answer 1

私は、ある種のモーダルとして要素を使用して、visibilityをhiddenとvisibleに設定することをお勧めします。

ボタンを押してイベントハンドラを追加し、この要素を非表示または表示することができます。

以下の例を参照してください：

const requestButton = document.querySelector('.request'); 
 
const yes = document.querySelector('.yes'); 
 
const no = document.querySelector('.no'); 
 
const confirmation = document.querySelector('.confirmation'); 
 
const loading = document.querySelector('.loading'); 
 
const content = document.querySelector('.content'); 
 

 
requestButton.addEventListener('click', event => { 
 
    confirmation.style.visibility = 'visible'; 
 
}); 
 

 
yes.addEventListener('click', event => { 
 
    // instead of a setTimeout, you'd actually make a request using `fetch` or jquery ajax 
 
    loading.style.visibility = 'visible'; 
 
    confirmation.style.visibility = 'hidden'; 
 
    window.setTimeout(() => { 
 
    // the code in this callback would be the same code you'd put in your `success` callback 
 
    // i.e. this code should run when the request finishes 
 
    loading.style.visibility = 'hidden'; 
 
    const p = document.createElement('p'); 
 
    p.innerText = 'Loaded!'; 
 
    content.appendChild(p); 
 
    }, 2000); 
 
}); 
 

 
no.addEventListener('click', event => { 
 
    confirmation.style.visibility = 'hidden'; 
 
});

.hidden-center { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    top: 0; 
 
    left: 0; 
 
    visibility: hidden; 
 
} 
 

 
.modal { 
 
    background-color: lightgray; 
 
    padding: 3em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="content"> 
 
    <button class="request">load a thingy?</button> 
 
</div> 
 
<div class="confirmation hidden-center"> 
 
    <div class="modal"> 
 
    Are you sure? 
 
    <div> 
 
     <button class="yes">Yes</button> 
 
     <button class="no">No</button></div> 
 
    </div> 
 
</div> 
 
<div class="loading hidden-center"> 
 
    <div class="modal"> 
 
    <div>Loading...</div> 
 
    <i class="fa fa-spinner fa-spin fa-3x"></i> 
 
    </div> 
 
</div>

をEDIT：

は、上記のコメントを読んで、あなたのアプリケーションは、単一ページのアプリケーションではありません（私は仮定のように見えます今日）。代わりに、ボタンのクリックにイベントリスナーを取り付ける、あなたがそうのようなフォームにイベントリスナーを添付する必要があります。

また

document.querySelector('#my-form-id').addEventListener('submit', event => {/*code to show loading*/}) 

、あなたはおそらくので、戻ってくるリクエストのイベントリスナーを追加する必要はありません新しい文書が現在の文書を置き換えます。