Display gif nach bestätigen, bis das Laden in Javascript

Question

Ich habe ein Formular, das eine Schaltfläche Senden enthält. Nachdem auf den Absenden-Button geklickt wurde, erscheint ein Bestätigungs-Popup. Sobald die Bestätigungsbedingung erfüllt ist, findet ein HTTP-Post statt. Manchmal kann dieser Beitrag jedoch etwas dauern. Daher möchte ich ein Lade-GIF anzeigen, nachdem die Bestätigungsbedingung erfüllt ist, bis die Post-Antwort zurückkommt, wodurch die Seite bereits neu geladen wird.

Answer 1

Ich würde vorschlagen, ein Element als eine Art modal zu verwenden und dann die css-Eigenschaft visibility auf und von hidden und visible zu setzen.

Dann können Sie Event-Handler zu Ihren Tastendrücken und Anforderungen hinzufügen, um dieses Element auszublenden oder anzuzeigen.

Siehe nachstehendes Beispiel:

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:

die Kommentare oben Lesen, sieht es aus wie Ihre Anwendung nicht eine einzige Seite Anwendung ist (ich nehme nur heutzutage). Statt einen Ereignis-Listener auf den Knopf klicken Befestigung, müssen Sie den Ereignis-Listener Form befestigen, wie so:

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

Auch Sie wahrscheinlich nicht brauchen, ein Ereignis-Listener für die Anforderung hinzuzufügen kommen zurück, weil Das neue Dokument wird das aktuelle Dokument ersetzen.