So implementieren Sie das Vorladen von Bildern mit 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.

Drei Methoden können verwendet werden, um das Vorladen von Bildern zu implementieren: CSS, JavaScript und Ajax. Die Implementierung dieser Methoden wird im Folgenden vorgestellt.

Verwenden Sie CSS

Verwenden Sie einfach CSS, um Bilder auf den Hintergrund von Seitenelementen zu laden:

#div1{background:url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px-9999px; }
#div2{background:url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px-9999px; }

Bei einem anderen Aufruf verwendet der Browser während des Rendervorgangs das vorgeladene (zwischengespeicherte) Bild, solange der Pfad konsistent ist. Einfach, effizient und erfordert kein JavaScript.

Nachteile: Bei dieser Methode wird das Bild gleichzeitig mit dem Laden der Seite geladen, was die Ladezeit der Seite verlängert. Es ist effizienter, JavaScript zur Unterstützung der Vervollständigung zu verwenden.

Verwenden Sie CSS und JavaScript kombiniert

functionpreload(){
if(document.getElementById) {
document.getElementById("div1").style.background ="url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px -9999px";
document.getElementById("div2").style.background ="url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px -9999px";
}
}
functionaddLoadEvent(func){
varoldonload =window.onload;
if(typeofwindow.onload !='function') {
window.onload = func;
} else{
window.onload =function(){
if(oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preload);

Wir stellen das Laden des Bildes so ein, dass es nach dem Laden der Seite erfolgt, sodass kein Bedarf besteht Sorgen Sie sich um das Bild und die Seite. Das gleichzeitige Laden erhöht die Zugriffszeit.

Machen Sie sich keine Sorgen, wenn JavaScript nicht ausgeführt werden kann. Es liegt lediglich daran, dass das Vorladen des Bildes fehlschlägt.

Verwenden Sie JavaScript, um

Methode 1 zu implementieren

varimages =newArray()
functionpreload(){
for(i =0; i < preload.arguments.length; i++) {
images[i] = newImage()
images[i].src = preload.arguments[i]
}
}
preload(
"http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg",
"http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg"
)

Methode 2

Diese Methode ist Eigentlich Das Prinzip ist das gleiche wie bei Methode eins, außer dass es nicht in einem Array implementiert ist, sondern der negative Wert von src des Image-Objekts separat verwendet wird.

if(document.images) {
img1 = newImage();
img2 = newImage();
img3 = newImage();
img1.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";
img2.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";
}

Ajax verwenden

Angenommen, alle oben genannten Methoden sind nicht cool genug, dann gibt es einen anderen Weg, nämlich die Verwendung Ajax. Implementieren Sie das Vorladen von Bildern. Verwenden Sie DOM, um das Vorladen zu implementieren, das alles andere laden kann, einschließlich Bilder, CSS und JavaScript. Im Vergleich zur direkten Verwendung von JavaScript besteht der Vorteil der Verwendung von Ajax darin, dass CSS und JavaScript vorab geladen werden können, ohne dass dies Auswirkungen auf die aktuelle Seite hat. Für Bilder ist das eigentlich kein Problem, dennoch ist diese Methode sehr einfach und effizient:

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

Genau so wird dieser Code vorab Laden Sie drei Dateien: preload.js, preload.css, preload.png. Das Festlegen einer Verzögerung von 1 Sekunde dient hauptsächlich dazu, zu verhindern, dass das Laden von JavaScript-Dateien auf normalen Seiten zu Funktionsproblemen führt.

Um es zu kapseln, sehen wir uns an, wie man diesen Code mit nativem JavaScript schreibt:

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

Hier sind wir drei Elemente über das DOM erstellt, um drei Dateien auf der Seite vorab zu laden. Wie im Originalartikel erwähnt, ist dieser Ansatz für Ajax nicht so gut. Vorinstallierte Dateiinhalte sollten nicht zur Ladeseite hinzugefügt werden.