Übersetzt aus: Erstellen eines CSS-Bild-Preloaders
Chinesisch: Reines Vorladen von CSS-Bildern
Es gibt viele Möglichkeiten, das Vorladen von Bildern zu implementieren. In der Regel wird Javascript verwendet, um den Bildlauf aufrechtzuerhalten. Lassen Sie sich nicht mehr durch das Vorladen von Javascript einschränken, sondern nutzen Sie CSS und Sie können Ihre Bilder problemlos vorab laden.
Warum Vorspannung verwenden?
Warum sollten Sie das Vorladen in Betracht ziehen? Hatten Sie schon einmal eine Website, auf der Sie in der Navigation scrollen mussten und es dann eine Verzögerung gab, bis die Bilder geladen wurden ... hehehe. Das Vorladen wird Ihnen dabei helfen. Diese Bilder werden beim Laden der Seite geladen und im Cache des Browsers gespeichert. Auf diese Weise ist die Navigation beim Scrollen durch den Benutzer schön und flüssig, ohne dass es zu Verzögerungen kommt.
CSS-Code
Das Konzept besteht darin, einen CSS-Stil zu schreiben, um eine Reihe von Hintergrundbildern festzulegen und diese dann auszublenden, sodass Sie diese Bilder nicht sehen können. Diese Hintergrundbilder möchten Sie vorab laden.
Hier ist ein Beispiel:
#preloader {
/* Bilder, die Sie vorab laden möchten*/
Hintergrundbild: url(image1.jpg);
Hintergrundbild: url(image2.jpg);
Hintergrundbild: url(image3.jpg);
Breite: 0px;
Höhe: 0px;
Anzeige: inline;
}
Dies ist lediglich eine Möglichkeit, Ihre Bilder auszublenden, damit sie nicht angezeigt werden. Ich habe auch gesehen, dass Leute sehr große Hintergrundpositionswerte verwenden, um Bilder herauszuschieben. Oder geben Sie einen negativen Margenwert an. Es gibt viele Möglichkeiten, die Bilder, die Sie vorab laden möchten, auszublenden. Wählen Sie diejenige aus, die am besten zu Ihnen passt.
eine andere Situation
Es kommt nicht oft vor, dass Sie ein riesiges Bild herunterladen müssen, wenn Sie dem üblichen Ansatz folgen und einen Hinweis darauf geben, dass das Bild geladen wird. Hier ist etwas CSS, um dem Benutzer einen Hinweis zu geben, dass das Bild geladen wird.
img {Hintergrund: url(loadingHourGlass.gif) no-repeat 50% 50% }
GIF-Bilder können animiert werden, ähnlich wie Wasserbälle auf einem Mac oder Sanduhren auf einem PC. Verwenden Sie eine Animation, damit der Benutzer weiß, dass etwas vor sich geht.
abschließend
Geben Sie Ihr Bestes, wenn das Vorladen sinnvoll ist und Ihre Benutzer Sie dafür lieben werden. Tatsächlich bemerken sie es möglicherweise nicht, aber das ist gut so, denn wenn sie bemerken, dass Ihre Website geladen wird, ist sie wahrscheinlich zu langsam.
Demo ansehen
Besondere Hinweise zu Beispiel 1
Zunächst einmal vielen Dank für die von Internetnutzern in den Kommentaren aufgeworfenen Fragen. Nachdem ich diesen Artikel übersetzt hatte, entschied ich, dass dies notwendig war, da dasselbe Attribut in einer CSS-Regel mehrmals definiert ist und Browser im Allgemeinen nur das letzte verarbeiten Machen Sie einen Test, aber ich wusste nicht, was los war. Aufgrund der Ernsthaftigkeit der Angelegenheit wurde sie nicht rechtzeitig behandelt, was zu Missverständnissen führen kann.
Nach meinen Tests laden die meisten Browser nur das letzte Bild und die ersten beiden Bilder werden ignoriert . Aber in Webkit-Core-Browsern wie Chrome werden diese drei Bilder vorab geladen. Beispiel 1 liefert uns eine gute Idee zur Lösung des Problems , aber für die Verwendung des Ladens mehrerer Bilder im gleichen CSS-Stil müssen wir möglicherweise warten, bis die mehreren Hintergrundbildattribute von CSS3 von mehr Browsern unterstützt werden.
PS: Lassen Sie mich diese Demo erklären. Vielleicht hat der ursprüngliche Autor nicht zu viel nachgedacht und wollte nur den Effekt des Vorladens demonstrieren, daher war diese Demoseite etwas einfach: Er verwendete einfach das vorgeladene Bild als Hintergrund für a:hover, sodass es beim Überfahren mit der Maus angezeigt wird es, Kann flimmerfreie Realität dieses Bildes. Nun, das ist die zweite Verwendung in dem Artikel ...