После того, как изображение каким-либо образом было загружено в браузер, оно будет в кеше браузера и будет загружаться намного быстрее при следующем использовании, независимо от того, используется ли это на текущей странице или на любой другой странице, пока изображение используется до истечения срока его хранения в кеше браузера.
Итак, чтобы предварительно кэшировать изображения, все, что вам нужно сделать, это загрузить их в браузер. Если вы хотите предварительно кэшировать кучу изображений, вероятно, лучше всего сделать это с помощью javascript, поскольку он обычно не задерживает загрузку страницы, когда выполняется с помощью javascript. Сделать это можно так:
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"]);
Эту функцию можно вызывать сколько угодно раз, и каждый раз она просто добавляет больше изображений в предварительный кэш.
После того, как изображения были предварительно загружены таким образом через javascript, браузер будет иметь их в своем кеше, и вы можете просто ссылаться на обычные URL-адреса в других местах (на своих веб-страницах), и браузер будет извлекать этот URL-адрес из своего кеша, а не через сеть.
В конце концов, со временем кеш браузера может заполниться и выбросить самые старые вещи, которые долгое время не использовались. Таким образом, в конечном итоге изображения будут сброшены из кеша, но они должны оставаться там некоторое время (в зависимости от того, насколько велик кеш и сколько еще выполняется просмотр). Каждый раз, когда изображения фактически предварительно загружаются снова или используются на веб-странице, они автоматически обновляют их положение в кеше браузера, поэтому вероятность их удаления из кеша снижается.
Кеш браузера является кросс-страничным, поэтому он работает для любой страницы, загруженной в браузер. Таким образом, вы можете предварительно кэшировать в одном месте вашего сайта, и тогда кеш браузера будет работать для всех остальных страниц вашего сайта.
При предварительном кэшировании, как указано выше, изображения загружаются асинхронно, поэтому они не будут блокировать загрузку или отображение вашей страницы. Но если на вашей странице много собственных изображений, эти предварительно кешированные изображения могут конкурировать за пропускную способность или соединения с изображениями, которые отображаются на вашей странице. Обычно это не является заметной проблемой, но при медленном соединении такое предварительное кэширование может замедлить загрузку главной страницы. Если было нормально загружать изображения предварительной загрузки в последнюю очередь, то вы могли бы использовать версию функции, которая будет ждать начала предварительной загрузки, пока не будут загружены все остальные ресурсы страницы.
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);