Una volta che l'immagine è stata caricata in qualche modo nel browser, sarà nella cache del browser e verrà caricata molto più velocemente la prossima volta che verrà usata, sia che l'uso sia nella pagina corrente o in qualsiasi altra pagina finchè come l'immagine viene utilizzata prima che scada dalla cache del browser.
Quindi, per precache immagini, tutto ciò che dovete fare è caricarle nel browser. Se vuoi precache un mucchio di immagini, probabilmente è meglio farlo con javascript in quanto in genere non regge il caricamento della pagina quando viene eseguito da javascript. Potete farlo in questo modo:
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"]);
Questa funzione può essere richiamata tutte le volte che si desidera e di volta in volta, sarà solo aggiungere altre immagini alla precache.
Una volta che le immagini sono state precaricate in questo modo tramite javascript, il browser le avrà nella sua cache e puoi semplicemente fare riferimento ai normali URL in altri luoghi (nelle tue pagine web) e il browser recupererà quell'URL dalla sua cache piuttosto che attraverso la rete.
Eventualmente nel tempo, la cache del browser potrebbe riempirsi e sballare le cose più vecchie che non sono state utilizzate da un po '. Quindi, alla fine, le immagini saranno scaricate dalla cache, ma dovrebbero rimanere lì per un po '(a seconda di quanto è grande la cache e quanta altra navigazione è fatta). Ogni volta che le immagini vengono effettivamente caricate di nuovo o utilizzate in una pagina Web, aggiornano automaticamente la loro posizione nella cache del browser in modo che sia meno probabile che vengano svuotate dalla cache.
La cache del browser è cross-page quindi funziona per qualsiasi pagina caricata nel browser. Quindi puoi precache in un posto nel tuo sito e la cache del browser funzionerà per tutte le altre pagine del tuo sito.
quando si precarica come sopra, le immagini vengono caricate in modo asincrono in modo da non bloccare il caricamento o la visualizzazione della pagina. Tuttavia, se la tua pagina ha molte immagini proprie, queste immagini precache possono competere per larghezza di banda o connessioni con le immagini visualizzate nella tua pagina. Normalmente, questo non è un problema evidente, ma su una connessione lenta, questo precaching potrebbe rallentare il caricamento della pagina principale. Se era OK per caricare le immagini di precarico per ultimo, è possibile utilizzare una versione della funzione che aspetterebbe di avviare il preloading fino a quando tutte le altre risorse di pagina non fossero già state caricate.
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);
Non lo sai. Il browser fa. – Pointy
il browser memorizza automaticamente le immagini nella cache? –
@Logan: Sì, il browser memorizza automaticamente le immagini nella cache, a condizione che il server invii le intestazioni necessarie per comunicare al browser che è sicuro salvarlo nella cache. (Queste intestazioni possono anche indicare al browser la data di scadenza, che è parte della tua domanda.) – icktoofay