Anzeigen eines Begrüßungsbildschirms während der Skriptausführung

Question

Ich möchte wissen, wie ein Begrüßungsbildschirm (wie eine gif- oder jpeg-Datei) während der Skriptausführung auf dem Benutzerbildschirm angezeigt wird.

Vielen Dank für Ihre Hilfe.

Answer 1

Ich kenne kein vorhandenes Skript, aber ich kann Ihnen sagen, wie Sie einen Splash-Screen implementieren würden.

Ich werde vorschlagen, JQuery zu verwenden, weil das ist, was ich als meine JS-Bibliothek der Wahl gewählt habe, aber die anderen sind auch gut.

Zuerst, in Ihrer JS-Methode möchten Sie das Popup anzeigen. Sie können dazu die JQuery Dialog widget verwenden. In der gleichen Methode, machen Sie Ihren Ajax-Anruf. Ajax sind von Natur aus asynchron, also richten Sie eine Methode für den Zeitpunkt ein, zu dem der Anruf beendet wird, und für den Fall, dass der Anruf fehlschlägt. Bei diesen beiden Methoden sollten Sie zunächst das modale Popup ausblenden.

Jetzt gibt es einen letzten Trick - Sie möchten unter unerwarteten Umständen, wie z. B. Verbindungsverlust, ordnungsgemäß fehlschlagen. Wenn Sie den Dialog anzeigen, möchten Sie daher auch einen für eventuelle Fehlerfälle einrichten, damit der Dialog nicht permanent angezeigt wird. Diese Methode sollte nur prüfen, ob der Dialog sichtbar ist, und falls ja, ihn ausblenden (und möglicherweise eine Fehlermeldung anzeigen).

Ich hoffe, das ist genug Informationen, um Sie in Gang zu bringen. Auch wenn Sie JavaScript neu sind, ist dies ein gutes Projekt, von dem Sie lernen sollten, da es nicht zu schwierig sein sollte.

Answer 2

Der Trick besteht darin, das Rendering neu zu malen, nachdem die Splash-Anzeige aktiviert wurde, bevor mit JS fortgefahren wird. Dazu können Sie die Methode setTimeout verwenden.

Zum Beispiel vorausgesetzt, Sie spritzen Display mit Display style none in einem div ist, dass Sie diese Funktion verwenden, können Sie Code ausführen: -

function splash(splashDivId, fn) 
{ 
    var splashDiv = document.getElementById(splashDivId) 
    splashDiv.style.display = "block"; 
    setTimeout(function() { 
     fn() 
     splashDiv.style.display = "none"; 
    }, 100); 

} 

Verbrauch: -

splash("mySplashDiv", longRunner) 

function longRunner() 
{ 
    //This may take a while 
} 

Answer 3

Ich verwende die jQuery blockUI Plugin zu erreichen, was Sie beschrieben haben. Schauen Sie sich die Beispiele an, sie sind hochgradig anpassbar, haben einen winzigen Platzbedarf und können mit einfachen, kleinen Rufen Wunder vollbringen.