Drei Hauptmethoden zum Vorladen von Bildern mithilfe von CSS, JavaScript und Ajax

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, das Vorladen von Bildern 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.

Mit CSS allein können Sie Bilder einfach und effizient vorladen. Der Code lautet wie folgt:

#preload-01 { background: url(image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(image-03.png) no-repeat -9999px -9999px; }

Wenden Sie diese drei ID-Selektoren auf das (X)HTML-Element an, und wir können es vorladen Bilder können über die CSS-Hintergrundeigenschaft auf einen Off-Screen-Hintergrund verschoben werden. 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 verlängert. 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:

function preloader() {        if (document.getElementById) {
                document.getElementById("p1").style.background = "url(image-01.png) no-repeat";
                document.getElementById("p2").style.background = "url(image-02.png) no-repeat";
                document.getElementById("p3").style.background = "url(image-03.png) no-repeat";
        }
}function addLoadEvent(func) {        var oldonload = window.onload;        if (typeof window.onload != 'function') {
                window.onload = func;
        } else {
                window.onload = function() {                        if (oldonload) {
                                oldonload();
                        }
                        func();
                }
        }
}
addLoadEvent(preloader);

Im ersten Teil des Skripts rufen wir das Element mithilfe des Klassenselektors ab und legen das Hintergrundattribut fest, damit es verschiedene Bilder vorab lädt.

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 tatsächlich effizient, aber wir haben nach und nach festgestellt, dass sie im eigentlichen Implementierungsprozess zu viel Zeit in Anspruch nimmt. 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

<div class="hidden">
        <script type="text/javascript">
                <!--//--><![CDATA[//><!--                        var images = new Array()                        function preload() {                                for (i = 0; i < preload.arguments.length; i++) {
                                        images[i] = new Image()
                                        images[i].src = preload.arguments[i]                                }
                        }
                        preload(                                "http://domain.tld/gallery/image-001.jpg",                                "http://domain.tld/gallery/image-002.jpg",                                "http://domain.tld/gallery/image-003.jpg"
                        )                //--><!]]>
        </script>
</div>

nur Einfach Bearbeiten und laden Sie den Pfad und Namen des erforderlichen Bildes, was einfach zu implementieren ist:

Diese Methode eignet sich besonders zum Vorladen einer großen Anzahl von Bildern. Meine Galerie-Website nutzt diese Technologie, um über 50 Bilder vorab zu laden. Wenden Sie dieses Skript auf die Anmeldeseite an und die meisten Galeriebilder werden vorab geladen, sobald der Benutzer seine Anmelde-ID eingibt.

JavaScript-Code-Snippet 2

<div class="hidden">
        <script type="text/javascript">
                <!--//--><![CDATA[//><!--                        if (document.images) {
                                img1 = new Image();
                                img2 = new Image();
                                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";
                        }                //--><!]]>
        </script>
</div>

Diese Methode ähnelt der oben genannten Methode, oder Sie können eine beliebige Anzahl von Bildern vorab laden. Fügen Sie das folgende Skript zu einer beliebigen Webseite hinzu und bearbeiten Sie es gemäß den Programmanweisungen.

Wie Sie sehen, müssen Sie jedes Mal, wenn Sie ein Bild laden, eine Variable erstellen, z. B. „img1 = new Image();“, und die Bildquelladresse angeben, z. B. „img3.src“. = "../pfad/zu /image-003.gif";". Mit diesem Muster können Sie so viele Bilder laden, wie Sie benötigen.

Wir haben diese Methode noch einmal verbessert. Binden Sie dieses Skript in eine Funktion ein und verwenden Sie addLoadEvent(), um die Vorladezeit zu verzögern, bis die Seite geladen ist.

function 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";
        }
}function addLoadEvent(func) {        var oldonload = window.onload;        if (typeof window.onload != 'function') {
                window.onload = func;
        } else {
                window.onload = function() {                        if (oldonload) {
                                oldonload();
                        }
                        func();
                }
        }
}
addLoadEvent(preloader);

Methode drei: Verwenden Sie Ajax, um das Vorladen zu implementieren

Die oben angegebene Methode scheint nicht cool genug zu sein, also schauen wir uns nun die Verwendung von Ajax an, um das Vorladen von Bildern zu implementieren Verfahren. Diese Methode verwendet DOM nicht nur zum Vorladen von Bildern, sondern auch zum Vorladen von CSS, JavaScript und anderen verwandten Dingen. Der Vorteil der Verwendung von Ajax gegenüber der direkten Verwendung von JavaScript besteht darin, dass das Laden von JavaScript und CSS keine Auswirkungen auf die aktuelle Seite hat. Die Methode ist einfach und effizient.

window.onload = function() {
        setTimeout(function() {                // XHR to request a JS and a CSS                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://domain.tld/preload.js');
                xhr.send('');
                xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://domain.tld/preload.css');
                xhr.send('');                // preload image                new Image().src = "http://domain.tld/preload.png";
        }, 1000);
};

Der obige Code lädt „preload.js“, „preload.css“ und „ preload.png". Die Zeitüberschreitung von 1000 Millisekunden soll verhindern, dass das Skript hängen bleibt und Funktionsprobleme bei normalen Seiten verursacht.

Als nächstes sehen wir uns an, wie Sie JavaScript verwenden, um den Ladevorgang zu implementieren:

window.onload = function() {
        setTimeout(function() {                // reference to <head>                var head = document.getElementsByTagName(&#39;head&#39;)[0];                // a new CSS                var css = document.createElement(&#39;link&#39;);
                css.type = "text/css";
                css.rel  = "stylesheet";
                css.href = "http://domain.tld/preload.css";                // a new JS                var js  = document.createElement("script");
                js.type = "text/javascript";
                js.src  = "http://domain.tld/preload.js";                // preload JS and CSS                head.appendChild(css);
                head.appendChild(js);                // preload image                new Image().src = "http://domain.tld/preload.png";
        }, 1000);
};

Hier erstellen wir es durch DOM Drei Elemente zum Implementieren des Vorladens von drei Dateien. Wie oben erwähnt, wird das Laden von Dateien bei Ajax nicht auf die Ladeseite angewendet. Unter diesem Gesichtspunkt sind Ajax-Methoden JavaScript überlegen.