title: Preloading background images
body: <p>I'm building a page that loops through 3 different backgrounds, changing every 750ms. To do this, I'm adding a class to the body with the relevent background image, changing with JS. For the first loop through, they flash because the image has to load, so it's not there instantly. Therefore is there any methods I can use to preload the images?</p>
  
  <p>CSS:</p>
  
  <pre><code>&amp;.backgrounds{
      background-position: center bottom;
      background-repeat: no-repeat;
      background-size: 130%;
  
      &amp;.freddy{
          background-image: url(/img/illustrations/snapchat/snapchat_holding_page_freddy.jpg);
      }
  
      &amp;.irene{
          background-image: url(/img/illustrations/snapchat/snapchat_holding_page_irene.jpg);
      }
  
      &amp;.joe{
          background-image: url(/img/illustrations/snapchat/snapchat_holding_page_joe.jpg);
      }
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>setInterval(function() {
      if ( $('.backgrounds').hasClass('freddy') ){
          $('.backgrounds').removeClass('freddy').addClass('irene');
  
      } else if ( $('.backgrounds').hasClass('irene') ){
          $('.backgrounds').removeClass('irene').addClass('joe');
  
      } else if ( $('.backgrounds').hasClass('joe') ){
          $('.backgrounds').removeClass('joe').addClass('freddy');
  
      }
  }, 750);
  </code></pre>