確認後顯示gif，直到加載完成爲javascript

Question

我有一個包含Submit按鈕的表單。點擊提交按鈕後，出現確認彈出窗口。一旦滿足確認條件，就會發生HTTP帖子。但是，有時候這篇文章可能需要一段時間。因此，我希望在滿足確認條件後顯示加載gif，直到回覆帖子，從而頁面已經重新加載。

Answer 1

我會建議使用某種模式的元素，然後設置css屬性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>

編輯：

閱讀上述評論，它看起來像你的應用程序是不是一個單一的網頁應用程序（我只是假設如今）。相反，事件偵聽器連接到按鈕點擊，您需要將事件偵聽器附加到表單，像這樣：

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

而且，你可能並不需要添加的事件偵聽器回來，因爲請求新文件將取代目前的文件。