javascript - Force a background image to be loaded before other background images -

is there way force downloading specific image (priority image) before other images downloaded?

i use many background images. landing page has gradient fill used second image of 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 using dom ready detection background image gradient displaying 3 or 4 seconds before landing page image downloaded...

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

now use window.onload , working fine, adding more , more images , downloading delay becoming substantial.

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

to reiterate question, able make downloading landing page priority. there way ensure background image displays before gradient displayed if switch using dom ready?

add image tag , place source in it. make sure add display none tag. place tag high in body tag. should prioritize image loading. hope works you.