Gdy obraz zostanie w jakikolwiek sposób załadowany do przeglądarki, znajdzie się w pamięci podręcznej przeglądarki i będzie ładował się znacznie szybciej przy następnym użyciu, niezależnie od tego, czy jest to na bieżącej stronie, czy na dowolnej innej stronie, o ile obraz jest używany przed wygaśnięciem z pamięci podręcznej przeglądarki.
Aby więc wstępnie zapisać obrazy, wszystko, co musisz zrobić, to załadować je do przeglądarki. Jeśli chcesz wstępnie zapisać kilka obrazów, prawdopodobnie najlepiej zrobić to za pomocą javascript, ponieważ generalnie nie wstrzymuje ładowania strony po wykonaniu z javascript. Możesz to zrobić w ten sposób:
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"]);
Ta funkcja może być wywoływana tyle razy, ile chcesz i za każdym razem doda ona więcej obrazów do pliku wstępnego.
Gdy obrazy zostaną wstępnie załadowane w ten sposób za pomocą javascript, przeglądarka będzie miała je w swojej pamięci podręcznej i możesz po prostu odwołać się do normalnych adresów URL w innych miejscach (na stronach internetowych), a przeglądarka pobierze ten adres URL ze swojej pamięci podręcznej, a nie przez sieć.
Z czasem pamięć podręczna przeglądarki może się zapełnić i wyrzucić najstarsze rzeczy, które nie były używane od jakiegoś czasu. W końcu obrazy zostaną opróżnione z pamięci podręcznej, ale powinny tam pozostać przez chwilę (w zależności od wielkości pamięci podręcznej i ilości innych operacji przeglądania). Za każdym razem, gdy obrazy są ponownie wstępnie ładowane lub używane na stronie internetowej, automatycznie odświeża ich pozycję w pamięci podręcznej przeglądarki, dzięki czemu jest mniej prawdopodobne, że zostaną usunięte z pamięci podręcznej.
Pamięć podręczna przeglądarki jest wielostronicowa, więc działa dla każdej strony załadowanej do przeglądarki. Możesz więc wstępnie buforować w jednym miejscu w swojej witrynie, a pamięć podręczna przeglądarki będzie działać dla wszystkich innych stron w Twojej witrynie.
Podczas wstępnego przygotowywania, jak powyżej, obrazy są ładowane asynchronicznie, więc nie będą blokować wczytywania ani wyświetlania strony. Jeśli jednak Twoja strona zawiera wiele własnych obrazów, te obrazy z pamięci wstępnej mogą konkurować o przepustowość lub połączenia z obrazami wyświetlanymi na Twojej stronie. Zwykle nie jest to zauważalny problem, ale przy wolnym połączeniu to wstępne uczenie może spowolnić ładowanie strony głównej. Jeśli wstępne ładowanie obrazów było w porządku, można użyć wersji funkcji, która będzie czekać z rozpoczęciem wstępnego ładowania do momentu, gdy wszystkie inne zasoby strony zostaną załadowane.
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);