Как кэшировать изображения

300
25 апреля 2018, 06:01

У меня есть галерея, но картинки не прогружается все, как мне загрузить например из массива все картинки, а потом уже запускать сайт, вот как я вижу: Юзер запускает сайт, идёт прелоадер, в это время подгружаются в кэш все картинки, и тогда уже запусксется сайт.

Answer 1

Можно воспользоваться событием window.onload оно срабатывает когда уже загружены все стили, скрипты, картинки, фреймы.

Картинки при этом должны быть прописаны непосредственно в Html, а не подгружаться асинхронно.

Например так:

window.onload = function(){
    // hide preloader
}
Answer 2

Вынесите пути в массив, и используйте следующую конструкцию. В цикле загружается создается новый объект image через конструктор Image().

let array = ['https://cs6.pikabu.ru/post_img/big/2015/06/18/3/1434596941_632146314.jpg', 'http://s.mediasole.ru/images/75/75506/d89e2a91d9932fef64ac532f756cbd06.jpg', 'http://www.bugaga.ru/uploads/posts/2017-03/1489052003_kotik-hosiko-1.jpg']; 
 
let imageCount = 0; 
 
for (let i = 0; i < array.length; i++) { 
  let img = new Image(); 
  img.onload = function() { 
    imageCount++; 
    console.log('загрузилось изображение'); 
    if (imageCount == array.length) { 
      document.getElementById('preloader').style.display = 'none'; 
    } 
  } 
  img.src = array[i]; 
}
<div id="preloader">Прелоадер</div>

READ ALSO
Как отправить jsonp на сервере?
javascript

Как отправить jsonp на сервере?

Есть js запрос такого вида:

 256
Маршрут не виден целиком (ymaps)
javascript

Маршрут не виден целиком (ymaps)

Есть карта с автомобильным маршрутом из точки А в точку Х и кнопкойПри активации кнопки маршрут меняется на пешеходный из точки В в точку...

 252
Изменение заднего фона в зависимости от выбранного изображения
javascript

Изменение заднего фона в зависимости от выбранного изображения

Необходимо, чтобы при загрузке изображения это же изображение появлялось размытым на заднем фоне

 265
Как сделать отступ сверху?
javascript

Как сделать отступ сверху?

Есть меню под шапкой которое при прокрутке страницы подымается в верх, но над шапкой есть поиск и меню его перекрывает, как сделать отступ,...

 230