1. Hintergrundeinführung
In der Online -Fotoalbumanwendung müssen die Benutzer einfachste Fotos anzeigen. Wenn das Netzwerk langsamer ist, ist die Wartezeit für das Anzeigen von Fotos relativ lang und die Benutzererfahrung wird sehr schlecht sein.
2. Aktuelle Situation
Es gibt zwei Hauptmethoden, um Fotos zu laden:
(1) Die originellste Möglichkeit zum direkten Laden und Anzeigen von Fotos auf der HTML -Seite mit dem IMG -Tag. Diese Methode hat einen leeren Wartevorgang, wenn die Netzwerkgeschwindigkeit langsam ist oder die zu angezeigten Fotos relativ groß sind und die Benutzererfahrung schlecht ist.
(2) Verwenden Sie zunächst das IMG -Tag, um die Miniaturansicht des Fotos zu laden, um das Foto auf der HTML -Seite anzuzeigen, und verwenden Sie dann JavaScript, um das Originalbild des versteckten Fotos zu laden, und warten Sie, bis das große Bild des Fotos geladen wird, bevor Sie das Originalbild auf der Seite anzeigen. Das Folgende ist das Flussdiagramm:
3. Unsere Lösung
Einige der kürzlich vom QQ -Fotoalbum erstellten Optimierungsmethoden haben die Mängel der beiden Berufungsmethoden gelöst und die Bedürfnisse der Benutzer erfüllt, um Fotos anzuzeigen: Sehen Sie sich die allgemeine Situation der Fotos so schnell wie möglich an und sehen Sie das klare Originalbild so schnell wie möglich. Diese Methode verwendet Miniaturansichten und Originalbilder, um gleichzeitig zu laden und zu Overlay -Anzeigen zu laden. Laden Sie zuerst die Miniaturansichten und erweitern Sie das Display, und das große Bild wird gleichzeitig auf den Miniaturansichten und Lasten überlagert. Die Miniaturansicht ist sehr klein und ermöglicht es Benutzern normalerweise, das unscharfe Bild schnell zu erkennen. Während der Beladung des großen Bildes wird die Miniaturansicht allmählich von oben nach unten abgedeckt, sodass der Benutzer das große Bild während des Ladevorgangs sehen kann.
(1) Beispieldiagramm
Wie oben gezeigt, sind die Verarbeitungsschritte dieser Methode:
1). Holen Sie sich die URL des Foto -Miniaturbilds und des Originalbildes und erhalten Sie die Länge und Breite des Fotos.
2). Laden und zeigen Sie die Bildministerien an und dehnen Sie die Miniaturansichten nach Länge und Breite des Films. Zu diesem Zeitpunkt sieht der Benutzer einen verschwommenen Effekt;
3). Laden und zeigen Sie das Originalfoto an und überlösen Sie das Originalbild auf der Miniaturansicht, um es anzuzeigen. Das Originalbild wird genauso angezeigt, wie es geladen wird. Wenn es nicht geladen ist, wird das Miniaturbild weiterhin angezeigt. Nach und nach überschreiben Sie die Miniaturansicht. Während des Ladevorgangs des Originalbildes sieht der Benutzer den Gradienteneffekt des Fotos von Unschärfe zu Löschen.
4). Nachdem das Originalbild geladen wurde, hat das Originalbild die Miniaturansichten überschrieben, und der Benutzer sieht das reale Originalbild. Zu diesem Zeitpunkt können Sie die Miniaturansichten verbergen, um zu verhindern, dass die Miniaturansichten die Anzeige von Bildern mit transparenten Effekten wie PNG oder GIF stören.
(2) Beispielcode
<!-Setzen Sie die Größe des Foto
Das obige ist der gesamte Inhalt dieses Artikels. Weitere Informationen zu JavaScript finden Sie unter: "JavaScript Reference Tutorial" und "JavaScript Code Style Guide". Ich hoffe auch, dass jeder wulin.com mehr unterstützt.