Sobald ein Bild in irgendeiner Weise in den Browser geladen wurde, befindet es sich im Browser-Cache und wird bei der nächsten Verwendung viel schneller geladen, unabhängig davon, ob diese Verwendung auf der aktuellen Seite oder auf einer anderen Seite erfolgt, solange sich das Bild befindet Wird verwendet, bevor es aus dem Browser-Cache abläuft.
Um Bilder vorzuspeichern, müssen Sie sie nur in den Browser laden. Wenn Sie eine Reihe von Bildern vorspeichern möchten, ist es wahrscheinlich am besten, dies mit Javascript zu tun, da es das Laden der Seite im Allgemeinen nicht aufhält, wenn es mit Javascript erstellt wird. Sie können das so machen:
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
var list = preloadImages.list;
for (var i = 0; i < array.length; i++) {
var img = new Image();
img.onload = function() {
var index = list.indexOf(this);
if (index !== -1) {
list.splice(index, 1);
}
}
list.push(img);
img.src = array[i];
}
}
preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);
Diese Funktion kann beliebig oft aufgerufen werden und fügt jedes Mal mehr Bilder zum Precache hinzu.
Sobald Bilder wie folgt über Javascript vorinstalliert wurden, werden sie vom Browser im Cache gespeichert. Sie können einfach auf die normalen URLs an anderen Stellen (auf Ihren Webseiten) verweisen, und der Browser ruft diese URL aus dem Cache ab und nicht über den Netzwerk.
Im Laufe der Zeit füllt sich der Browser-Cache möglicherweise und wirft die ältesten Dinge weg, die seit einiger Zeit nicht mehr verwendet wurden. Irgendwann werden die Bilder aus dem Cache gelöscht, aber sie sollten eine Weile dort bleiben (abhängig davon, wie groß der Cache ist und wie viel anderes Durchsuchen durchgeführt wird). Jedes Mal, wenn die Bilder erneut vorgeladen oder auf einer Webseite verwendet werden, wird ihre Position im Browser-Cache automatisch aktualisiert, sodass sie weniger wahrscheinlich aus dem Cache gelöscht werden.
Der Browser-Cache ist seitenübergreifend und funktioniert daher für alle in den Browser geladenen Seiten. Sie können also an einer Stelle Ihrer Site vorcachen, und der Browser-Cache funktioniert dann für alle anderen Seiten Ihrer Site.
Beim Vorab-Caching wie oben werden die Bilder asynchron geladen, damit das Laden oder Anzeigen Ihrer Seite nicht blockiert wird. Wenn Ihre Seite jedoch viele eigene Bilder enthält, können diese Precache-Bilder um Bandbreite oder Verbindungen mit den auf Ihrer Seite angezeigten Bildern konkurrieren. Normalerweise ist dies kein auffälliges Problem, aber bei einer langsamen Verbindung kann dieses Vorspeichern das Laden der Hauptseite verlangsamen. Wenn es in Ordnung war, dass Bilder vor dem Laden zuletzt geladen wurden, können Sie eine Version der Funktion verwenden, die mit dem Vorladen wartet, bis alle anderen Seitenressourcen bereits geladen wurden.
function preloadImages(array, waitForOtherResources, timeout) {
var loaded = false, list = preloadImages.list, imgs = array.slice(0), t = timeout || 15*1000, timer;
if (!preloadImages.list) {
preloadImages.list = [];
}
if (!waitForOtherResources || document.readyState === 'complete') {
loadNow();
} else {
window.addEventListener("load", function() {
clearTimeout(timer);
loadNow();
});
timer = setTimeout(loadNow, t);
}
function loadNow() {
if (!loaded) {
loaded = true;
for (var i = 0; i < imgs.length; i++) {
var img = new Image();
img.onload = img.onerror = img.onabort = function() {
var index = list.indexOf(this);
if (index !== -1) {
list.splice(index, 1);
}
}
list.push(img);
img.src = imgs[i];
}
}
}
}
preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"], true);
preloadImages(["url99.jpg", "url98.jpg"], true);