Po załadowaniu obrazu w jakikolwiek sposób do przeglądarki, będzie ono znajdować się w pamięci podręcznej przeglądarki i ładować się będzie znacznie szybciej przy następnym użyciu, niezależnie od tego, czy jest ono używane na bieżącej stronie, czy na dowolnej innej stronie. ponieważ obraz jest używany przed wygaśnięciem z pamięci podręcznej przeglądarki.
Tak więc, aby wykonać wstępne obrazy, wystarczy załadować je do przeglądarki. Jeśli chcesz wstępnie skompresować kilka obrazów, najlepiej jest zrobić to za pomocą javascript, ponieważ generalnie nie będzie on ładował strony po wykonaniu z javascript. Można to zrobić tak:
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) {
// remove image from the array once it's loaded
// for memory consumption reasons
list.splice(index, 1);
}
}
list.push(img);
img.src = array[i];
}
}
preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);
Funkcja ta może być wywołana tyle razy, ile chcesz i za każdym razem, to będzie po prostu dodać więcej zdjęć do precache.
Po wczytaniu obrazów w javascript, przeglądarka będzie je przechowywać w pamięci podręcznej i można po prostu odwoływać się do normalnych adresów URL w innych miejscach (na twoich stronach internetowych), a przeglądarka pobierze ten adres URL z pamięci podręcznej zamiast przez sieć.
Ostatecznie z upływem czasu pamięć podręczna przeglądarki może wypełniać i rzucać najstarsze rzeczy, które przez jakiś czas nie były używane. Ostatecznie obrazy zostaną wypuszczone z pamięci podręcznej, ale powinny pozostać tam przez jakiś czas (w zależności od tego, jak duża jest pamięć podręczna i jak wiele innego przeglądania jest wykonywane). Za każdym razem, gdy obrazy są w rzeczywistości ponownie ładowane lub używane na stronie internetowej, automatycznie odświeża się ich pozycja w pamięci podręcznej przeglądarki, więc jest mniej prawdopodobne, że zostaną wypuszczone z pamięci podręcznej.
Pamięć podręczna przeglądarki jest stroną między stronami, więc działa dla każdej strony załadowanej do przeglądarki. Możesz więc wstępować w jednym miejscu w swojej witrynie, a pamięć podręczna przeglądarki będzie działać na wszystkich innych stronach w Twojej witrynie.
Po wykonaniu powyższego zdjęcia obrazy są wczytywane asynchronicznie, aby nie blokować ładowania ani wyświetlania strony. Ale jeśli twoja strona ma wiele własnych obrazów, te obrazy z precache mogą konkurować o przepustowość lub połączenia z obrazami, które są wyświetlane na twojej stronie. Zwykle nie jest to zauważalny problem, ale w przypadku powolnego połączenia, ten precaching może spowolnić ładowanie strony głównej. Jeśli ładowanie obrazów wstępnych zostało załadowane jako ostatnie, można użyć wersji funkcji, która czekała na rozpoczęcie wstępnego ładowania, dopóki wszystkie inne zasoby stron nie 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();
});
// in case window.addEventListener doesn't get called (sometimes some resource gets stuck)
// then preload the images anyway after some timeout time
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) {
// remove image from the array once it's loaded
// for memory consumption reasons
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);
ty nie. Przeglądarka ma. – Pointy
powoduje automatyczne buforowanie obrazów przeglądarki? –
@Logan: Tak, przeglądarka buforuje obrazy automatycznie, pod warunkiem, że Twój serwer wyśle niezbędne nagłówki, aby poinformować przeglądarkę, że można bezpiecznie zapisać w pamięci podręcznej. (Te nagłówki mogą również informować przeglądarkę o czasie wygaśnięcia, który jest częścią twojego pytania.) – icktoofay