Загрузка картинок через js один раз. Как?

Question

[koida_yuri]

Создаю слайдер. Есть массив со ссылками на картинки.

var data = [
              {
                   img:'http://mirpozitiva.ru/uploads/posts/2016-08/1472042512_05.jpg',
                   span:'Пространство для творчества',
                   active:0,
               },
               {
                   img:'http://wp.widewallpapers.ru/2k/nature/forest/1920x1200/forest-wallpaper-1920x1200-004.jpg',
                   span:'Пространство для творчества',
                   active:0,
               },
               {
                   img:'http://pulson.ru/wp-content/uploads/2013/03/pulson362.jpg',
                   span:'Пространство для творчества',
                   active:0,
               },
           ];

На страницу картинка подгружается таким образом

html += '<div style="background: url('+dat.img+') no-repeat center center; background-size: cover;">';
$(this).append(html);

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

Answer 1

[Alex]

C чего вы решили что они именно загружаются?
Может быть поднимаются из кеша?

Comments

[koida_yuri]

видно как они подгружаются при появлении, и если смотреть через файрбаг то пишет ошибку "Загрузка смешанного (небезопасного) отображаемого содержимого" так как у меня https, каждый раз при обновлении картинки

[Alex]

koida_yuri: Тогда создайте скрытые картинки и подменяйте их.
Или просто оставьте их скрытыми, чтобы браузер знал что да как.

Ну или повесьте их на https. что будет лучше. иначе все плюшки https в поисковой оптимизации отпадают

Answer 2

[vetsmen]

Вообще, не гуд так делать. Создать несколько div блоков с разными идентификаторами и нужными картинками в них, инициализируй их при загрузке страницы, реализуй функцию с setInterval, которая будет менять состояние нужного div'a (show/hide). Выборку нужного div'a организуй через цикл.

Answer 3

[TekVanDo]

https://jsfiddle.net/qgv0m0gc/

function ImagePreloader(imageUrls) {
  var images = imageUrls.reduce(function (obj, url) {
    var image = {
      img: new Image()
    };
    image.loadingPromise = new Promise(function (resolve) {
        image.img.onload = function () {
          resolve(image);
        };
  	});
    image.img.src = url;
    obj[url] = image;
    return obj;
  }, {});

  this.onLoaded = function () {
    return Promise.all(imageUrls.map(function (url) {
      return images[url].loadingPromise;
    }));
  };
  this.getImage = function (url) {
    return images[url].loadingPromise;
  };
};


var preloader = new ImagePreloader([
  "http://farm4.static.flickr.com/3030/2618425424_e1d3b952ae.jpg?_=1234",
  "http://farm4.static.flickr.com/3030/2618425424_e1d3b952ae.jpg?_=5678"
]);

preloader.onLoaded().then(function (images) {
  console.log('all images loaded');
  images.map(function(image) {
  	document.body.appendChild(image.img);
  })
});