Seite beim Laden mit pace.js ausblenden

7

Ich arbeite mit pace , einem Seitenlader, und es funktioniert einwandfrei. Aber ich kann nicht herausfinden, wie man die gesamte Seite mit Ausnahme der Ladezeile während des Ladens der Seite ausblendet und nach dem Ladevorgang anzeigt. Irgendwelche Ideen?

    
user3052215 09.03.2014, 14:24
quelle

7 Antworten

11

Ich weiß, dass dies eine Art alter Beitrag ist, aber ich bin gerade auf dieses Problem gestoßen und habe eine andere mögliche Lösung gefunden:)

Versteckt in der Pace-Dokumentation ist Pace.on (). Sie können es verwenden, um an die in den Dokumenten aufgelisteten Ereignisse zu binden:

%Vor%     
wyzkid207 07.06.2014 13:49
quelle
7

Ich habe das mit dem folgenden Code gelöst.

%Vor%

als Anzeige: Keine verursachte ein Problem mit der Ausrichtung in den Google Maps auf der Seite. das funktioniert perfekt und muss ein wenig Übergang dazu hinzufügen.

    
Jakki 16.05.2016 09:50
quelle
5

Sie müssen die Seite nicht ausblenden. Erstellen Sie einfach ein festes Element, das Ihre Seite abdeckt, ohne es anzuzeigen, und blenden Sie es dann mit dem Laden der Funktion aus.

%Vor%

Und Sie können dem Container eine geladene .gif-Datei oder etwas hinzufügen, das verschwindet, wenn Ihre Seite vollständig geladen ist.

    
Rodrigo Zuluaga 09.03.2014 14:33
quelle
2

Pace.js fügt dem Körper tatsächlich eine Klasse hinzu. "Pace-running" wird hinzugefügt, während das Tempo aktiv ist, ersetzt durch pace-run, wenn es abgeschlossen ist.

Sie können bestimmte CSS dann:

%Vor%

Sie können den obigen Code Ihren Anforderungen entsprechend bearbeiten.

    
anurag619 27.12.2015 14:13
quelle
2

Ich weiß, dass diese Frage ziemlich alt ist, aber ich habe es mit einem kleinen CSS-Block geschafft.

%Vor%

Dies verwendet die Klasse, die PACE auf dem Element <body> platziert, während die Seite geladen wird. Beachten Sie, dass dadurch die Seite bei langen AJAX-Anfragen verschwinden könnte ... Sie könnten das wahrscheinlich umgehen, indem Sie Javascript aktivieren, um zu überprüfen, ob die .pace-running -Klasse aus dem <body> -Element entfernt wurde. Wenn Sie jedoch keine XHR-Anfragen haben, sollten Sie damit einverstanden sein.

    
deansheather 19.01.2016 14:47
quelle
1

Versuchen Sie es unter Beispiel einfach und einfach ....

  1. finde die ID für den gesamten Seitencontainer div
%Vor%
  1. Nach dem setzen dieser CSS basiert auf was auch immer Sie in der ganzen Container ID

    erwähnt haben %Vor%

FYR:

Ссылка

    
Stack Overflow User 14.04.2015 09:07
quelle
1

Wenn Sie keine Deckkraft verwenden möchten, können Sie versuchen:

%Vor%

Weniger Code erforderlich, um die Sichtbarkeit zu reduzieren oder die Hintergrundseite auszublenden, während Pace.js ausgeführt wird

    
Anthony 30.11.2016 13:18
quelle

Tags und Links