@koida_yuri

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

Создаю слайдер. Есть массив со ссылками на картинки.
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);

Картинки изменяются по таймеру, и при каждом изменении эти картинки загружаются заново.
Как избежать постоянной загрузки этих картинок?
  • Вопрос задан
  • 512 просмотров
Пригласить эксперта
Ответы на вопрос 3
streetflush
@streetflush
C чего вы решили что они именно загружаются?
Может быть поднимаются из кеша?
Ответ написан
@vetsmen
Вообще, не гуд так делать. Создать несколько div блоков с разными идентификаторами и нужными картинками в них, инициализируй их при загрузке страницы, реализуй функцию с setInterval, которая будет менять состояние нужного div'a (show/hide). Выборку нужного div'a организуй через цикл.
Ответ написан
Комментировать
TekVanDo
@TekVanDo
Javascript Developer
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);
  })
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы