title: Preloading images on safari for background image change
body: <p>I have a background that changes every 12seconds. 
  In Chrome, Firefox and Opera the background change is works fine, but in Safari the browser always loads the image again and that is noticed by a flickering on every image change on the first cycle. Any ideas on how can I solve this problem.</p>
  
  <p>This is how I'm handling the background change:</p>
  
  <pre><code>var img2 = new Image();
  var img3 = new Image();
  img2.src="/img/bg2.png";
  img3.src="/img/bg3.png";
  Meteor.setInterval(function(){
      let elem = $(".header-2");
      if(elem.hasClass("bg1")){
          elem.removeClass("bg1");
          elem.addClass("bg2");
          let src = 'url('+img2.src.replace(location.origin,'')+')';
          elem.css("background-image", src);
      }
      else if(elem.hasClass("bg2")){
          elem.removeClass("bg2");
          elem.addClass("bg3");
          let src = 'url('+img3.src.replace(location.origin,'')+')';
          elem.css("background-image", src);
      }
      else{
          elem.removeClass("bg3");
          elem.addClass("bg1");
      }
  }, 12*1000)
  </code></pre>
  
  <p>The css classes:</p>
  
  <pre><code>.header-2.bg1 {
      background-image: url('/img/bg1.png');
  }
  .header-2.bg2 {
  
  }
  .header-2.bg3 {
  
  }
  </code></pre>