1

Господа, есть такой простой слайдер. Как видно из примера фото не отображаются сразу. Как до запуска слайдера загрузить фотографии в кеш и брать их уже от туда?

Маленькое дополнение. Это могут быть не только фото... Например: видео, музыкальные файлы... И естественно не в слайдере, а где то еще... Меня интересует сама логика... Ну и маленький пример с кодом, чтобы было понятнее. Я хочу подобные файлы загружать заранее.


P.S. Тут мне уже ответили, но у меня на компьютере все ровно тормозит. И не понятно, что как и для чего...

var sliderFoto = [
  'url(https://get.wallhere.com/photo/trees-forest-fall-waterfall-water-nature-rocks-national-park-pond-jungle-stream-rainforest-watercourse-wasserfall-habitat-natural-environment-body-of-water-water-feature-57484.jpg)',
  'url(http://ru.artsdot.com/ADC/Photos-ImgScreen.nsf/O/P-AC6V56/$FILE/Buildings-night_city_65_.Jpg)',
  'url(https://cdn.wallaps.com/wallpapers/10000/2870.jpg)',
  'url(http://on-desktop.com/wps/Nature_Beach_Bright_paints_of_coast_023115_.jpg)',
  'url(http://wallpaperscraft.ru/image/ravnina_zelen_solnce_gory_derevya_trava_326_2560x1600.jpg)'
];

var sliderBox = document.getElementById('sliderBox');

sliderBox.style.backgroundImage = sliderFoto[4];
//sliderBox.style.backgroundSize = 'cover';

var count = 0;
(function() {
  setInterval(function() {
    if (count >= sliderFoto.length) {
      count = 0;
    }

    sliderBox.style.backgroundImage = sliderFoto[count++];
  }, 5000)
}())
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #272727;
  color: white;
}

#wrapper {
  width: 100%;
  height: 100%;
}

#sliderBox {
  position: relative;
  top: 20px;
  left: calc(50% - 175px);
  width: 350px;
  height: 230px;
  background-size: cover;
  transition: all .5s;
}
<div id="wrapper">
  <div id="sliderBox">

  </div>
</div>

5
  • скорее всего, "копать" Вам надо в эту сторону. habrahabr.ru/post/279291. Я попробовал, но "грунт" что-то твердоват)
    – Dmytro
    18 дек 2017 в 8:23
  • а почему именно бэкграунд? почему не картинкой обычной? Если бэкгранудом, то возможно просто в сами стили прописать классы, с этими картинками? и просто делать ротацию добавляя определенные классы?
    – NeedH8
    19 дек 2017 в 19:29
  • @NeedHate, это для простоты примера... меня же не способ замены интересует...
    – Air
    19 дек 2017 в 19:59
  • Т.е. вопрос именно в: возможно ли предзагрузить что-то до момента его рендеринга?
    – NeedH8
    19 дек 2017 в 20:02
  • да да да.........
    – Air
    19 дек 2017 в 20:03

1 ответ 1

4
  1. Создаем элемент - image - new Image() или через document.createElement('img');
  2. Проверяем через промисы "подгрузилась" ли картинка;
  3. Запускаем наш скрипт, который использует эти картинки, но, уже из кэша.

Через Network видно, что картинки подгружаются, а потом используются из кэша без подзагрузок.

console.clear();
var links = [
  'http://via.placeholder.com/350x230/33ff99/555555?text=Slide_1',
  'http://via.placeholder.com/350x230/33ff99/555555?text=Slide_2',
  'http://via.placeholder.com/350x230/33ff99/555555?text=Slide_3',
];

const sliderFunc = () => {
  const sliderBox = document.getElementById('sliderBox');
  const img = sliderBox.querySelector('img');

  img.src = `${links[0]}`;

  var count = 0;
  (function() {
    setInterval(function() {
      if (count == links.length) {
        count = 0;
      }
      img.src = `${links[count++]}`;
    }, 1000)
  }())

}

const checkImage = path =>
  new Promise(resolve => {
    const img = new Image();
    img.onload = () => resolve({
      path,
      status: 'ok'
    });
    img.src = path;
  }).then(result => console.log(result.status, '...image is loaded from', path));

const loadImg = (paths) => Promise.all(paths.map(checkImage)).then(results => console.log('...all images are loaded')).then(sliderFunc);

loadImg(links)
html,
body {
  width: 100%;
  height: 100%;
  background: #272727;
  color: white;
}

#wrapper {
  width: 100%;
  height: 100%;
}

#sliderBox {
  width: 150px;
  height: 90px;
  background-size: cover;
  transition: all .5s;
}

img {
  width: 350px;
}
<div id="wrapper">
  <div id="sliderBox">
    <img src="" alt="">
  </div>
</div>

UPD

Добавил консоль логи, где сообщается о подгрузке нового изображения, после загрузки всех изображений выводится соответствующее сообщение. Единственную проблему, которую я обнаружил с предзагрузкой вот этот вот адрес: https://get.wallhere.com/... Каждый раз get как будто заново перезагружает одно и тоже изображение. С остальными такого нет, думаю здесь именно в этом ресурсе кроется нюанс. А так, network показывает вполне ожидаемый результат: (from disk cache)

3
  • NeedHate, скопировал к себе на комп твой ответ и если честно то фотки так же грузятся не равномерно... можешь описать свой пример, комментами, что как там происходит...?
    – Air
    20 дек 2017 в 7:43
  • Дополнил ответ.
    – NeedH8
    20 дек 2017 в 12:16
  • NeedHate, Благодарю, разобрался...
    – Air
    20 дек 2017 в 14:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.