Vorladungsbilder sind eine großartige Möglichkeit, Ihre Benutzererfahrung zu verbessern. Die Bilder werden in den Browser vorgeladen, und die Besucher können reibungslos auf Ihrer Website surfen und extrem schnelle Ladegeschwindigkeiten genießen. Dies ist sehr vorteilhaft für Bildgalerien und Websites, auf denen Bilder einen großen Teil ausmachen. Es stellt sicher, dass die Bilder schnell und nahtlos veröffentlicht werden und Benutzer auch dabei helfen können, eine bessere Benutzererfahrung beim Durchsuchen Ihrer Website -Inhalte zu erhalten. In diesem Artikel wird drei verschiedene Vorspannungstechnologien ausgetauscht, um die Leistung und Verwendbarkeit der Website zu verbessern.
Methode 1: Verwenden Sie CSS und JavaScript, um das Vorladen zu implementieren
Es gibt viele Möglichkeiten, vorlastende Bilder zu implementieren, einschließlich der Verwendung von CSS, JavaScript und verschiedenen Kombinationen der beiden. Diese Technologien können entsprechende Lösungen nach verschiedenen Designszenarien entwerfen, die sehr effizient sind.
Wenn Sie CSS allein verwenden, können Sie Bilder einfach und effizient vorladen, und der Code lautet wie folgt:
Die Codekopie 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; }
Indem wir diese drei ID-Selektoren auf das HTML-Element (x) anwenden, können wir das Bild auf dem Hintergrund außerhalb des Bildschirms über die Hintergrundeigenschaft von CSS vorladen. Solange die Pfade dieser Bilder gleich bleiben, verwendet der Browser während des Renders vorinstallierte (Cache-) Bilder, wenn sie an anderer Stelle auf der Webseite aufgerufen werden. Einfach, effizient und benötigt kein JavaScript.
Obwohl diese Methode effizient ist, gibt es Raum für Verbesserungen. Die mit dieser Methode geladenen Bilder werden zusammen mit anderen Inhalten der Seite geladen, wodurch die Gesamtladezeit der Seite erhöht wird. Um dieses Problem zu lösen, haben wir einen JavaScript -Code hinzugefügt, um die Vorspannungszeit zu verzögern, bis die Seite geladen ist. Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
// Besseres Bild vorladen @ <a href = "http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/"> http://perishablepress.com/press/2009/28/3-3-ways---Preload--Preload- preloader () {
if (document.getElementById) {
document.getElementById ("preload-01").
document.getElementById ("preload-02"). style.background = "url (http: //domain.tld/image-02.png) No-Repeat -9999px -9999px";
document.getElementById ("preload-03").
}
}
Funktion addloadevent (func) {
var oldonload = window.onload;
if (typeof window.onload! = 'Funktion') {
window.onload = func;
} anders {
window.onload = function () {
if (Oldonload) {
Oldonload ();
}
func ();
}
}
}
Addloadevent (Voroader);
Im ersten Teil des Skripts nehmen wir das Element mithilfe des Klassenauswahl an und setzen die Hintergrundeigenschaft, damit sie verschiedene Bilder vorladen.
Im zweiten Teil dieses Skripts verwenden wir die Funktion addloadevent (), um die Ladezeit der Funktion vor der Vorladung () zu verzögern, bis die Seite geladen ist.
Was passiert, wenn JavaScript im Browser des Benutzers nicht ordnungsgemäß funktioniert? Es ist sehr einfach. Das Bild wird nicht vorinstalliert. 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 stellen allmählich fest, dass es bei der tatsächlichen Implementierung zu viel Zeit dauert. Stattdessen bevorzuge ich es, pure JavaScript zu verwenden, um Bilder vorzuladen. Zwei solcher Vorspannungsmethoden sind nachstehend bereitgestellt, die auf allen modernen Browsern wunderbar funktionieren können.
JavaScript -Code -Segment 1
Es ist einfach zu implementieren, indem Sie einfach den Pfad und den Namen des erforderlichen Bildes bearbeiten und laden:
Die Codekopie lautet wie folgt:
<div>
<script type = "text/javaScript">
<!-//-> <! [Cdata [//> <!-var bilder = new Array ()
Funktion preload () {
für (i = 0; i <preload.argumente.length; i ++) {
Bilder [i] = neues Bild ()
Bilder [i] .src = preload.argumente [i]
}
}
Vorspannung (
"http: //domain.tld/gallery/image-001.jpg",
"http: //domain.tld/gallery/image-002.jpg",
"http: //domain.tld/gallery/image-003.jpg"
)
//-> <!]]> </script>
</div>
Diese Methode ist besonders geeignet, um eine große Anzahl von Bildern vorzuladen. Meine Galerie -Website verwendet diese Technologie und verfügt über mehr als 50 vorinstallierte Bilder. Wenden Sie das Skript auf die Anmeldeseite an, und solange der Benutzer das Anmeldungskonto eingibt, werden die meisten Galeriebilder vorinstalliert.
JavaScript Snippet 2
Diese Methode ähnelt der obigen Methode und kann auch eine beliebige Anzahl von Bildern vorladen. Fügen Sie jeder Webseite das folgende Skript hinzu und bearbeiten Sie es gemäß den Programmanweisungen.
Die Codekopie lautet wie folgt:
<div>
<script type = "text/javaScript">
<!-//-> <! [Cdata [///> <!-if (document.images) {
img1 = new Image ();
img2 = neues Bild ();
img3 = neues Bild ();
img1.src = "http: //domain.tld/path/to/image-001.gif";
img2.src = "http: //domain.tld/path/to/image-002.gif";
img3.src = "http: //domain.tld/path/to/image-003.gif";
}
//-> <!]]> </script>
</div>
Wie zu sehen ist, erfordert jedes Bildladen eine Variable wie "IMG1 = New Image (); und die Bildquellenadressenerklärung wie "img3.src =
"../path/to/image-003.gif"; ". In diesem Modus können Sie so viele Bilder laden, wie Sie möchten.
Wir haben diese Methode wieder verbessert. In eine Funktion einkapseln und verwenden Sie addloadevent (), um die Vorspannungszeit zu verzögern, bis die Seite geladen ist.
Die Codekopie lautet wie folgt:
Funktion preloader () {
if (document.images) {
var img1 = new Image ();
var img2 = new Image ();
var img3 = new Image ();
img1.src = "http: //domain.tld/path/to/image-001.gif";
img2.src = "http: //domain.tld/path/to/image-002.gif";
img3.src = "http: //domain.tld/path/to/image-003.gif";
}
}
Funktion addloadevent (func) {
var oldonload = window.onload;
if (typeof window.onload! = 'Funktion') {
window.onload = func;
} anders {
window.onload = function () {
if (Oldonload) {
Oldonload ();
}
func ();
}
}
}
Addloadevent (Voroader);
Methode 3: Verwenden Sie AJAX, um das Vorladen zu implementieren
Die oben angegebene Methode scheint nicht cool genug zu sein. Schauen wir uns nun eine Methode an, mit der AJAX zur Implementierung von Bildvorspannungen verwendet wird. Diese Methode verwendet DOM, nicht nur Vorladungen, sondern auch Vorspannungs -CSS, JavaScript und andere verwandte Dinge. Die Verwendung von AJAX ist besser als JavaScript direkt zu verwenden. Der Vorteil besteht darin, dass das Laden von JavaScript und CSS die aktuelle Seite nicht beeinflusst. Diese Methode ist einfach und effizient.
Die Codekopie lautet wie folgt:
window.onload = function () {
setTimeout (function () {
// xhr, um ein JS und ein CSS var xhr = neu xmlhttprequest () anzufordern;
xhr.open ('get', 'http: //domain.tld/preload.js');
xhr.send ('');
xhr = neu xmlhttprequest ();
xhr.open ('get', 'http: //domain.tld/preload.css');
xhr.send ('');
// Bild vorladen neu im Bild (). src = "http: //domain.tld/preload.png";
}, 1000);
};
Der obige Code wird mit "preload.js", "preload.css" und "preload.png" vorinstalliert. Das 1000 Millisekunden -Zeitüberschrieb besteht darin, zu verhindern, dass das Skript auf der normalen Seite funktionelle Probleme verursacht.
Folgen wir unten, wie der Ladevorgang mit JavaScript implementiert wird:
Die Codekopie lautet wie folgt:
window.onload = function () {
setTimeout (function () {
// Verweis auf <kopf>
var head = document.getElementsByTagName ('head') [0];
// ein neues CSS
var css = document.createelement ('link');
CSS.Type = "Text/CSS";
css.rel = "Stylesheet";
CSS.HREF = "http: //domain.tld/preload.css";
// ein neuer JS
var js = document.createelement ("script");
Js.Type = "Text/JavaScript";
Js.Src = "http: //domain.tld/preload.js";
// Vorspannung JS und CSS Head.AppendChild (CSS);
Head.AppendChild (JS);
// Bild vorladen
New Image (). Src = "http: //domain.tld/preload.png";
}, 1000);
};
Hier erstellen wir drei Elemente über DOM, um das Vorladen von drei Dateien zu implementieren. Wie oben erwähnt, wird die Ladedatei bei AJAX nicht auf die Ladeseite angewendet. Aus dieser Sicht ist die AJAX -Methode JavaScript überlegen.
Okay, dieser Artikel wird hier vorgestellt. Jeder hat bereits die drei Methoden zur Implementierung der Bildvorladungstechnologie verstanden. Welches ist effizienter? Ich denke, Freunde haben es auch gesehen, also wenden Sie es auf ihre eigenen Projekte an.