Une fois qu'une image a été chargée d'une manière ou d'une autre dans le navigateur, elle se trouve dans la mémoire cache du navigateur et se chargera beaucoup plus rapidement la prochaine fois qu'elle sera utilisée, que ce soit dans la page actuelle ou dans une autre page, à condition que l'image soit utilisée avant qu'elle n'expire de la mémoire cache du navigateur.
Ainsi, pour précacher des images, il suffit de les charger dans le navigateur. Si vous voulez précacher un grand nombre d'images, il est probablement préférable de le faire en javascript, car cela ne ralentira généralement pas le chargement de la page si c'est fait en javascript. Vous pouvez le faire comme suit :
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"]);
Cette fonction peut être appelée autant de fois que vous le souhaitez et, à chaque fois, elle ne fera qu'ajouter des images au précache.
Une fois que les images ont été préchargées de cette manière par javascript, le navigateur les conserve dans son cache et vous pouvez simplement faire référence aux URL normales à d'autres endroits (dans vos pages web) et le navigateur ira chercher l'URL dans son cache plutôt que sur le réseau.
Au fil du temps, le cache du navigateur peut se remplir et jeter les éléments les plus anciens qui n'ont pas été utilisés depuis un certain temps. Les images finiront donc par être éliminées du cache, mais elles devraient y rester pendant un certain temps (en fonction de la taille du cache et de l'intensité de la navigation). Chaque fois que les images sont rechargées ou utilisées dans une page web, leur position dans le cache du navigateur est actualisée automatiquement, de sorte qu'elles sont moins susceptibles d'être supprimées du cache.
Le cache du navigateur est inter-pages, il fonctionne donc pour toutes les pages chargées dans le navigateur. Vous pouvez donc effectuer une mise en cache à un endroit de votre site et le cache du navigateur fonctionnera alors pour toutes les autres pages de votre site.
Lors de la mise en cache comme ci-dessus, les images sont chargées de manière asynchrone, de sorte qu'elles ne bloquent pas le chargement ou l'affichage de votre page. Mais si votre page contient beaucoup d'images, ces images précachées peuvent entrer en concurrence avec les images affichées dans votre page pour la bande passante ou les connexions. Normalement, ce n'est pas un problème notable, mais sur une connexion lente, cette mise en cache peut ralentir le chargement de la page principale. S'il était acceptable que les images de préchargement soient chargées en dernier, vous pourriez utiliser une version de la fonction qui attendrait que toutes les autres ressources de la page aient été chargées avant de commencer le préchargement.
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);
