Ich habe eine sehr einfache HTML5 iPhone Webanwendung, die fast perfekt funktioniert; Es gibt nur ein Problem: Zwischen dem Startbild und dem Startbildschirm der App erscheint für etwa eine Sekunde ein vollständig weißer Bildschirm (d. h. flackert).
Ich lade die App mithilfe des Buttons "Zum Startbildschirm hinzufügen" aus dem Internet auf mein Telefon herunter. Die Javascript-Datei ( functions.js ) und Stylesheet sind beide sehr kleine Dateien.
Hat jemand dieses Problem gehabt? Gibt es Möglichkeiten, um es zu umgehen / reparieren?
index.html
%Vor%demo.manifest
%Vor%.htaccess
%Vor%BEARBEITEN # 1 : Ich habe etwas mehr recherchiert und bin auf diese Antwort :
Das Löschen des Bildschirms und anderer Artefakte beim Rendern ist ein häufiges Problem beim HTML-Rendering aufgrund der progressiven Natur von HTML. Das Konzept ist, dass der Browser so früh und so oft wie möglich zeichnen sollte und Stile / Skripte / Inhalte rendern soll, sobald sie verfügbar sind. Es ist möglich, dass das Markup ein Problem hat, bei dem alle Rendering-Vorgänge verzögert werden, bis ein Inhalt oder ein Skript verfügbar ist. Dies kann passieren, wenn:
- Sie haben dynamische Höhen basierend auf Bilddimensionen, aber Sie haben keine Legen Sie die Bildmaße im Markup oder CSS fest.
- Ihr Layout basiert auf Tabellen und Sie verwenden in CSS kein 'table-layout: fixed'.
- Ihr HTML verwendet Inline-Skripte mit document.write ().
- Sie haben eine Art onLoad () -Funktion, die Inhalte anzeigt / ändert.
- Sie verlinken auf ein externes Stylesheet.
- Sie verwenden nicht speicherbaren externen Inhalt oder Sie haben das Caching deaktiviert.
- Sie verwenden externen Inhalt, der 404 zurückgibt oder offline nicht verfügbar ist.
Ich habe alle Vorschläge in dieser Antwort befolgt, aber es befreit meine Web-App nicht vom weißen Flimmern. Gibt es irgendwelche Hacks, um dieses Problem zu umgehen?
BEARBEITEN # 2 : Ich habe versucht, kein Javascript und ein Stylesheet mit nur:
zu verwenden %Vor%Aber es ist immer noch ein weißes Flackern. Da dies bei allen Web-Anwendungen wie diesem ein Problem zu sein scheint, lautet meine Frage: Gibt es irgendwelche Hacks, um dieses Problem zu umgehen?
CSS-Selektoren sind ziemlich langsam auf iOS (gierige CSS-Reset-Skripte haben auch schreckliche Leistung).
Kopf initiierte JavaScript-Selbstlade-DOM-fähige Skripte und CSS-Selektoren, die zusammen laufen, verstärken das Problem weiter. Da Sie sowohl CSS- als auch Javascript-Anfragen im Kopf haben, gibt es eine kleine, aber spürbare Verzögerung bei der Verarbeitung des Körpers, insbesondere der Hintergrundfarbe des Körpers.
Die meisten HTML5-Frameworks werden zum Laden des verzögerten Skripts verschoben. Als Minmum möchten Sie zuerst das Stylesheet laden und sich dann um Javascript kümmern. Versuchen Sie, die CSS oben und die Skripts unten zu platzieren und dann eine Standardhintergrundfarbe einzufügen (kein Bild - es gibt eine beträchtliche Verzögerung bei der Wiedergabe von skalierten Hintergrundbildern und CSS-Verläufen von iOS 5).
Sie können das Async-Attribut auch auf iOS5 + ausprobieren, aber ich habe es selbst nicht versucht.
Hoffe das hilft:)
Alles klar, scheint ein grundlegendes und nerviges Problem zu sein. Ich denke, der beste Weg, dies zu bewältigen, wäre via AJAX (Asynchronous JavaScript und XML). Ich bin sicher, dass Sie wahrscheinlich bereits wissen, was das ist, aber es ist nur eine Möglichkeit, eine Anforderung von JavaScript für eine Datei an anderer Stelle zu senden und dann auf die Seite zu laden oder zu analysieren, wie Sie es wünschen.
Für Ihr Beispiel empfehle ich Ihnen, die CSS-Zeile, die das Hintergrundbild hat, folgendermaßen zu kommentieren:
%Vor%Beachten Sie, dass der zweite Kommentar das Kommentieren und Auskommentieren der einen Zeile beim Debuggen des Codes erleichtert.
Fügen Sie nun Ihrem Körper einfach ein einfaches img-Tag hinzu und machen Sie src zu einem Ajax-Loader (Sie können die Spinnradgeneratoren überall finden). Von hier aus können Sie JavaScript schreiben, um das Bild zu laden, den Spinner loszuwerden und ihn zu ersetzen.
Diese Lösung gefällt mir nicht, ich glaube nicht, dass die meisten Leute es mögen würden. Deshalb benutze ich 'Bootloader.js' , welches ein kleines AJAX-Ladewerkzeug ist, das ich vor ein paar Monaten geschrieben habe, um Leuten zu helfen mit solchen Problemen.
Es ist einfach zu verwenden, neben dem Skript-Include fügen Sie einfach dieses Meta-Tag hinzu:
%Vor%Das Formular und die Anker sind optional, wenn Sie es verwenden, wird es alle Ihre Formulare und Links asynchron machen (nicht für den bereichsübergreifenden Einsatz noch ). Die Formulare sind nicht einfach einzurichten, Sie können die Dokumentation dazu lesen, wenn Sie möchten.
Schließlich richte deinen Körper so ein:
%Vor%Und da hast du es, das wird alles für dich regeln.
Letzter VorschlagWenn Sie keine dieser Optionen mögen oder eine begrenzte, aber anpassbare Option wünschen, empfehle ich Ihnen Image LazyLoader von Mika Tuupola (im Lieferumfang von Bootloader.js enthalten) und auch verfügbar unter: Ссылка
Sag mir, wie es geht und was du benutzt! XD
Tags und Links javascript html iphone ios web-applications