Heim > Artikel > Web-Frontend > Drei Hauptmethoden zum Vorladen von Bildern und zur Analyse ihrer Vor- und Nachteile: Javascript-Fähigkeiten

Drei Hauptmethoden zum Vorladen von Bildern und zur Analyse ihrer Vor- und Nachteile: Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 16:30:521488Durchsuche

Das Vorabladen von Bildern ist eine großartige Möglichkeit, die Benutzererfahrung zu verbessern. Da die Bilder im Browser vorinstalliert sind, können Besucher problemlos auf Ihrer Website surfen und sich über rasend schnelle Ladezeiten freuen. Dies ist sehr vorteilhaft für Bildergalerien und Websites, auf denen Bilder einen großen Anteil ausmachen. Es stellt sicher, dass Bilder schnell und nahtlos veröffentlicht werden, und trägt außerdem zu einem besseren Benutzererlebnis beim Durchsuchen Ihrer Website-Inhalte bei. In diesem Artikel werden drei verschiedene Vorladetechniken vorgestellt, um die Leistung und Benutzerfreundlichkeit der Website zu verbessern.

Methode 1: Verwenden Sie CSS und JavaScript, um das Vorladen zu implementieren

Es gibt viele Möglichkeiten, vorinstallierte Bilder zu implementieren, einschließlich der Verwendung von CSS, JavaScript und verschiedenen Kombinationen aus beiden. Diese Technologien können entsprechende Lösungen für unterschiedliche Entwurfsszenarien entwerfen und sind sehr effizient.
Mithilfe von CSS können Sie Bilder einfach und effizient vorab laden. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

#preload-01 { Hintergrund: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { Hintergrund: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { Hintergrund: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

Durch die Anwendung dieser drei ID-Selektoren auf das (X)HTML-Element können wir das Bild über das CSS-Hintergrundattribut auf den Off-Screen-Hintergrund vorladen. Solange die Pfade zu diesen Bildern gleich bleiben, verwendet der Browser die vorinstallierten (zwischengespeicherten) Bilder während des Rendervorgangs, wenn sie an anderer Stelle auf der Webseite aufgerufen werden. Einfach, effizient und erfordert kein JavaScript.
Obwohl diese Methode effizient ist, gibt es noch Raum für Verbesserungen. Mit dieser Methode geladene Bilder werden zusammen mit anderen Inhalten auf der Seite geladen, wodurch sich die Gesamtladezeit der Seite erhöht. Um dieses Problem zu lösen, haben wir JavaScript-Code hinzugefügt, um die Vorladezeit bis zum Laden der Seite zu verzögern. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

// besseres Vorladen von Bildern @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http: //perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/> function preloader() {
If (document.getElementById) {
         document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
         document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
         document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
}
}
Funktion addLoadEvent(func) {
var oldonload = window.onload; If (typeof window.onload != 'function') {
window.onload = func; } else {
Window.onload = Funktion () {
If (oldonload) {
                        oldonload();                                                                                                                          func();                                                                                                                             }
}
addLoadEvent(preloader);

Im ersten Teil des Skripts rufen wir das Element mithilfe des Klassenselektors ab und legen das Hintergrundattribut darauf fest, um verschiedene Bilder vorab zu laden.
Im zweiten Teil des Skripts verwenden wir die Funktion addLoadEvent(), um die Ladezeit der Funktion preloader() zu verzögern, bis die Seite geladen ist.
Was passiert, wenn JavaScript im Browser des Benutzers nicht ordnungsgemäß ausgeführt wird? Es ist ganz einfach. Das Bild wird nicht vorgeladen. Wenn die Seite das Bild aufruft, wird es normal angezeigt.

Methode 2: Verwenden Sie JavaScript nur, um das Vorladen zu implementieren

Die obige Methode ist manchmal sehr effizient, aber wir haben nach und nach festgestellt, dass sie im eigentlichen Implementierungsprozess zu viel Zeit in Anspruch nehmen würde. Stattdessen verwende ich lieber reines JavaScript zum Vorladen von Bildern. Im Folgenden finden Sie zwei solcher Vorlademethoden, die in allen modernen Browsern hervorragend funktionieren.

JavaScript-Snippet 1
Bearbeiten und laden Sie einfach den Pfad und den Namen des gewünschten Bildes, die Implementierung ist ganz einfach:

Code kopieren Der Code lautet wie folgt: