title: Force a background image to be loaded before other background images
body: <p>Is there a way to force downloading a specific image (priority image) before other images are downloaded?</p>
  
  <p>I use many background images. My landing page has a gradient fill used as my second image of my landing page. </p>
  
  <p>landing page CSS:</p>
  
  <pre><code>.bg-img1::before {
    background-image: url(https://mywebsite/images/myimage.jpg), linear-gradient(to top, #206020, white);
    background-size: cover, cover;
  }
  </code></pre>
  
  <p>I switched from using DOM ready detection as my background image gradient was displaying 3 or 4 seconds before my landing page image was downloaded...</p>
  
  <pre><code>$(function() {
      // DOM ready, but image hasn't downloaded yet.
  });
  </code></pre>
  
  <p>Now I use window.onload and everything is working fine, but I am adding more and more images and the downloading delay is becoming substantial.</p>
  
  <pre><code>window.onload = function() {
    // delay, delay... finally my landing page with gradient displays
  });
  </code></pre>
  
  <p>To reiterate my question, I would like to be able to make downloading my landing page a priority. Is there a way to ensure that my background image displays before my gradient is displayed if I switch back to using DOM ready?</p>