Ich habe eine App Angular 2 entwickelt, die ziemlich groß ist und einen Moment braucht, um geladen zu werden (die vendor.js ist ungefähr 5 MB groß). Um die Zeit für den Benutzer etwas angenehmer zu gestalten, ersetzte ich den Standard
mit einer CSS-Animation (Ladebalken) oder einer GIF-Animation (habe ich beides versucht) auf die Art:
%Vor%oder
%Vor%Aber das geht nicht, da die Animation (CSS oder GIF) beim Laden der Seite einfriert und wenn sie weiter läuft, ist die Angular App bereit und wird angezeigt. Also das Ergebnis ist eine Freezed-Lade-Animation und dann ist die App = Situation nicht besser als vorher ...
BTW: Javascript (z. B. setInterval ) wird während dieser Ladezeit ebenfalls nicht ausgeführt. Ich habe versucht, die vendor.js mit async und defer aufzunehmen, aber ohne Erfolg.
Irgendwelche Ideen?
Bearbeiten: scheint ein Google Chrome-Problem zu sein - mit Firefox funktioniert die Animation reibungslos.
Ich benutze einen Lade-Spinner auf meiner persönlichen Website mit CSS, dachte nur, ich würde meinen Code teilen, weil es für mich funktioniert und scheint keine Probleme mit einer großen Codebasis zu haben. Offensichtlich werden Sie es an Ihre Bedürfnisse anpassen wollen, wenn dies für Sie arbeitet.
Im HTML:
%Vor%Im CSS:
%Vor%Tags und Links javascript animation angular loading