Frage von xpr0gamers, 24

Wie eine AngularJS Website im Hintergrund laden?

Hallo zusammen,

ich habe mir eine schon etwas größere Website mit AngularJS programmiert. Da AngularJS auf Dependance Injektion Aufbaut muss man alle Javascript Dateien in der Index Datei einbinden. Das führt dazu, dass beim ersten Aufruf die Seite jetzt schon 5-10 Sekunden zum laden braucht. Und ich möchte die Website noch ausbauen.

Die Website dreht sich um einen Krankenpflege Dienst. Jetzt wäre meine Idee ich lasse eine Foto Show anzeigen und lade die richtige Website im Hintergrund. Ist diese Website irgendwann geladen, möchte ich Sie dann anzeigen lassen. Hat jemand eine Idee?

Antwort
von abbrechen, 7

Benutze webpack und bundle die gesamte Webseite (html, css, javascript) in einer Datei, die in der Index verlinkt ist.
Dann hat sich die Ladezeit sogar mit WLAN nach nach 3 Sekunden erledigt.

Expertenantwort
von regex9, Community-Experte für Programmierung, 8

Dein Konzept hast du doch bereits?

Kommentar von xpr0gamers ,

Und wie setze ich es Technisch um? Wie kann ich eine Website mittels Javascript im Hintergrund laden? 

Kommentar von regex9 ,

Ein Beispiel: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5

Du könntest die Seite auch asynchron laden. Anfangs liefert der Request ein sehr übersichtliches Markup, welches schnell geladen ist (so wie der Loader im Beispiel oben). Eine Box könnte die vollständige Seite bedecken und bestimmte Inhalte anzeigen. Oder das visibility-Property (CSS) vom Content-Container wird vorerst auf hidden gesetzt.

Mit einem einfachen AJAX-Request und vorzugsweise nativen JS werden Requests an den Server geschickt, die weiteren Inhalte nachzuliefern. Wenn alle Komponenten da sind, kann ein Signal an die Box / den Content-Container gesendet werden, den aktuellen Idle-Zustand zu ändern.

Von einer Bildershow würde ich im Übrigen eher abraten, denn die Bilder selbst benötigen, vor allem bei einer größeren Auflösung, selbst eine gewisse Ladezeit.

Weitere Bsp. für eine Lade-Animation:

Keine passende Antwort gefunden?

Fragen Sie die Community