Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim Web-Frontend js-Tutorial 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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 04:30 PM
css jquery js 图片预加载

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:

Related knowledge
Wie zeige ich die lokal installierte 'Jingnan Mai Round Body' auf der Webseite richtig? Wie zeige ich die lokal installierte 'Jingnan Mai Round Body' auf der Webseite richtig? Apr 05, 2025 pm 10:33 PM

Mit lokal installierten Schriftdateien auf Webseiten kürzlich habe ich eine kostenlose Schriftart aus dem Internet heruntergeladen und sie erfolgreich in mein System installiert. Jetzt...

Wie wähle ich ein untergeordnetes Element mit dem erstklassigen Namen über CSS aus? Wie wähle ich ein untergeordnetes Element mit dem erstklassigen Namen über CSS aus? Apr 05, 2025 pm 11:24 PM

Wenn die Anzahl der Elemente nicht festgelegt ist, wählen Sie das erste untergeordnete Element des angegebenen Klassennamens über CSS aus. Bei der Verarbeitung der HTML -Struktur begegnen Sie häufig auf verschiedene Elemente ...

Bedarf die Produktion von H5 -Seiten eine kontinuierliche Wartung? Bedarf die Produktion von H5 -Seiten eine kontinuierliche Wartung? Apr 05, 2025 pm 11:27 PM

Die H5 -Seite muss aufgrund von Faktoren wie Code -Schwachstellen, Browserkompatibilität, Leistungsoptimierung, Sicherheitsaktualisierungen und Verbesserungen der Benutzererfahrung kontinuierlich aufrechterhalten werden. Zu den effektiven Wartungsmethoden gehören das Erstellen eines vollständigen Testsystems, die Verwendung von Versionstools für Versionskontrolle, die regelmäßige Überwachung der Seitenleistung, das Sammeln von Benutzern und die Formulierung von Wartungsplänen.

Ist die H5-Seitenproduktion eine Front-End-Entwicklung? Ist die H5-Seitenproduktion eine Front-End-Entwicklung? Apr 05, 2025 pm 11:42 PM

Ja, die H5-Seitenproduktion ist eine wichtige Implementierungsmethode für die Front-End-Entwicklung, die Kerntechnologien wie HTML, CSS und JavaScript umfasst. Entwickler bauen dynamische und leistungsstarke H5 -Seiten auf, indem sie diese Technologien geschickt kombinieren, z. B. die Verwendung der & lt; canvas & gt; Tag, um Grafiken zu zeichnen oder JavaScript zu verwenden, um das Interaktionsverhalten zu steuern.

Was sind die Vorteile der H5 -Seitenproduktion Was sind die Vorteile der H5 -Seitenproduktion Apr 05, 2025 pm 11:48 PM

Die Vorteile der H5 -Seitenproduktion umfassen: Leichte Erfahrung, schnelle Ladegeschwindigkeit und Verbesserung der Benutzerbindung. Die plattformübergreifende Kompatibilität ist nicht erforderlich, um sich an verschiedene Plattformen anzupassen und die Entwicklungseffizienz zu verbessern. Flexibilität und dynamische Updates, kein Audit erforderlich, was die Änderung und Aktualisierung von Inhalten erleichtert. Kosteneffektive, niedrigere Entwicklungskosten als native Apps.

Wie kann ich mit mehreren Überlaufverlusten am mobilen Terminal kompatibel? Wie kann ich mit mehreren Überlaufverlusten am mobilen Terminal kompatibel? Apr 05, 2025 pm 10:36 PM

Kompatibilitätsprobleme des Multi-Reis-Überlaufs auf mobilen Terminal auf verschiedenen Geräten bei der Entwicklung mobiler Anwendungen mit VUE 2.0 begegnen Sie häufig auf die Notwendigkeit, den Text zu überfließen ...

Wie kann man den Stil verschachtelter Divelemente effizient verändern? Wie kann man den Stil verschachtelter Divelemente effizient verändern? Apr 05, 2025 pm 10:45 PM

Eingehende Diskussion über verschachtelte Methoden zur Änderung des Div-Stils In diesem Artikel wird detailliert erklärt, wie der Div-Element-Stil von verschachtelten Strukturen effektiv geändert werden kann. Die Herausforderung, vor der wir stehen, ist, wie ...

Ist der Schwellenwert für die H5 -Seitenproduktion hoch? Ist der Schwellenwert für die H5 -Seitenproduktion hoch? Apr 05, 2025 pm 11:45 PM

Der Schwellenwert für die Herstellung von H5 -Seiten ist je nach Ziel weder hoch noch niedrig. Es ist einfacher, einfache statische Seiten herzustellen, Sie müssen nur das Grundwissen von HTML und CSS beherrschen. Es ist relativ hoch, Seiten mit starken interaktiven und reichhaltigen Merkmalen zu erstellen, und Sie müssen über umfassende Kenntnisse über HTML, CSS, JavaScript, Front-End-Frameworks, Leistungsoptimierung und Kompatibilität verfügen.

See all articles