title: Preloading a background-image with a temporary gif image
body: <p>I have a couple of divs with background images. I would like to know how I can preload those background-images with a gif image since some of the background images are quite large. Doing the following does not work:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="glykopeels" onload="loadImage()"&gt;Glykopeels Content&lt;/div&gt;
  &lt;div id="facials" onload="loadImage2()"&gt;Facials Content&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#glykopeels{
          background: #ebebeb url(http://lamininbeauty.co.za/images/products/preloader.gif) no-repeat top right;
          background-size: contain;
      }
  #facials{
      background: #ebebeb url(http://lamininbeauty.co.za/images/products/preloader.gif) no-repeat top right;
      background-size: contain;
      }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function loadImage(){
          document.getElementById('glykopeels').style.background = '#ebebeb url(http://lamininbeauty.co.za/images/products/glykopeel.jpg);';
      }
  function loadImage2(){
          document.getElementById('facials').style.background = '#ebebeb url(http://lamininbeauty.co.za/images/products/facial.jpg);';
      }
  </code></pre>
  
  <p>I guess defining a different ID for that element in the onload function and defining css for that new ID is another possibility? Thus changing only the id of that element inside the onload function?</p>
  
  <p>Thank you</p>