jquery случайный фон - другое время

Question

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

Любая помощь очень ценится.

$(function() {
  var images = ['1.png', '2.png', '3.png'];
  $('#sectionhero').css({
    'background-image': 'url(bgimages/' + images[Math.floor(Math.random() * images.length)] + ')'
  });
});

Answer 1

Вы можете сделать это, используя куки,

https://github.com/js-cookie/js-cookie

$(function() {
  var images = ['https://cdn.pixabay.com/photo/2017/09/14/11/13/water-2748657_960_720.png', 'https://images.panoramatours.com/pt/focus/49/50/1536/648/user_upload/Sehenswuerdigkeiten/Salzburg/Schloss_Leopoldskron__c__Panorama_Tours.jpg', 'https://media.studioatrium.pl/project/1030/willa-panorama-ii-wizualizacja-1350-5954e6b4080d8.jpg'];
  if (Cookies.get('randomBackground') == undefined) {
    Cookies.set('randomBackground', 0); // if there's no cookie, it will display the first image
  } else {
    // if there's cookie, get a new one
    var randomBackground = getRandomBackground();
    Cookies.set('randomBackground', randomBackground);
  }
  $('#sectionhero').css({
    'background-image': 'url(' + images[Cookies.get('randomBackground')] + ')'
  });

  function getRandomBackground() {
    var rand = Math.floor(Math.random() * images.length);
    // if the value is the same as existing cookie value, get another one
    if (rand == Cookies.get('randomBackground')) return getRandomBackground();
    else {
      return rand;
    }
  }
});