Force a background image to be loaded before other background images

Question

Is there a way to force downloading a specific image (priority image) before other images are downloaded?

I use many background images. My landing page has a gradient fill used as my second image of my landing page.

landing page CSS:

.bg-img1::before {
  background-image: url(https://mywebsite/images/myimage.jpg), linear-gradient(to top, #206020, white);
  background-size: cover, cover;
}

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...

$(function() {
    // DOM ready, but image hasn't downloaded yet.
});

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.

window.onload = function() {
  // delay, delay... finally my landing page with gradient displays
});

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?

Answer 1

add an image tag and place the source in it. make sure that you add display none to this tag. place this tag as high up in your body tag. this should prioritize your image loading. hope this works for you.