О ,я как раз собирался уточнить это) Суть в том ,что на сайте есть достаточно много картинок ,и про проверке сайта на скорость загрузки ,мне посоветовало "кэшировать изображения" ,я начитался в интернете ,что можно начать загрузку всех изображений сразу ,до их открытия пользователем ,путем кэширования. Т.е. страницы открылась ,пользователь еще на самом верху ,а изображения в других местах страницы уже грузятся и когда он до них доходит ,они уже загружены ,как то так )
Насчет проверки на скорость загрузки - имеется в виду как раз отдавать правильные заголовки для кэширования с сервера, что Вам уже подсказали в комментариях к вопросу.
Ну а насчет предварительной загрузки изображений до показа их пользователю, понадобится список таких изображений, которые нужно предзагрузить. Сразу скажу, что грузить таким образом изображения, которые уже есть на странице смысла нет, но вот изображения для всяких модалок таким образом грузить вполне себе резонно:
// сделаем функцию, ждущую загрузку основной страницы,
// чтоб не мешать ей при загрузке дополнительных картинок:
function waitWindowLoad() {
if(document.readyState === 'complete') {
return Promise.resolve();
}
return new Promise(resolve => {
const listener = () => {
window.removeEventListener('load', listener);
resolve();
};
window.addEventListener('load', listener);
});
}
// массив url подгружаемых картинок
[
'/images/1.png',
'/images/2.png',
'/images/3.png'
].reduce((promise, url) => promise.then(() => new Promise(resolve => {
// грузим картинки по очереди
const img = new Image();
img.onload = img.onerror = resolve;
img.src = url;
})), waitWindowLoad());
