Після того, як зображення будь-яким чином було завантажено в браузер, воно буде знаходитися в кеші браузера і завантажуватиметься набагато швидше під час наступного використання, незалежно від того, чи є це використання на поточній або будь-якій іншій сторінці, доки зображення є використовується до закінчення терміну дії з кешу браузера.
Отже, для попереднього кешування зображень потрібно лише завантажити їх у браузер. Якщо ви хочете попередньо кешувати купу зображень, напевно, найкраще це робити за допомогою 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);