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

Maybe the script I did for you works as you expect. By using JS there's no possibility to set the CSS pseudo elements such the :before.

What I did, was to change the code so it provides the img URL as data attribute in the image containers.

Then using the JavaScript I hide all the image containers and start creating new images dynamically, and then I set the src attribute, to the value of the data-img of the section element.

Finally, I listen for the load and error event, and then I show again the container. This way you can be sure, that the image it is already loaded in the browser, and thus when the image container it is displayed will have the image already in place.

(
  function ( $, window, undefined ) {
  
    var img_container = null;
    var img_loaded = 0;
  
    var hide_img_containers = function hide_img_containers() {
      if ( 0 < img_container.length ) {
        img_container.hide();
      }
    }
    
    var show_img_containers = function show_img_containers( $element ) {
      $element.show();
    }
    
    var load_images = function () {
      img_container.each(
        function() {
          var $section = $( this );
          var $img = $section.attr( 'data-img' );
          var img = document.createElement('img');
          
          img.src = $img;
          img.addEventListener( 
            'load',
            function () {
              show_img_containers ( $section );
            }
          );
          
          img.addEventListener( 
            'error',
            function () {
              show_img_containers ( $section );
            }
          );
        }
      );
    }
  
    $( document ).ready(
      function ( $ ) {
      
        img_container = $( '.img_container' );
        
        hide_img_containers ();
        load_images();
                
      }
    );
  
  }
)( jQuery, this );

.img_container {
    min-height: 250px;
    position: relative;
}

.img_container:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

#sec_1:before {
    background-image: url(http://www.lifeofpix.com/wp-content/uploads/2017/03/dscf0786.jpg), linear-gradient(to top, #206020, #fff);
    background-size: cover, cover;
}

#sec_2:before {
    background-image: url(http://www.lifeofpix.com/wp-content/uploads/2017/03/dscf0357.jpg), linear-gradient(to top, #206020, #fff);
    background-size: cover, cover;
}

#sec_3:before {
    background-image: url(http://www.lifeofpix.com/wp-content/uploads/2016/05/Life-of-Pix-free-stock-street-lights-wall-PaulJarvis.jpg), linear-gradient(to top, #206020, #fff);
    background-size: cover, cover;
}

#sec_4:before {
    background-image: url(http://www.lifeofpix.com/wp-content/uploads/2017/03/1-276.jpg), linear-gradient(to top, #206020, #fff);
    background-size: cover, cover;
    background-position: 50% 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="sec_1" class="img_container" data-img="http://www.lifeofpix.com/wp-content/uploads/2017/03/dscf0786.jpg"></section>
<section id="sec_2" class="img_container" data-img="http://www.lifeofpix.com/wp-content/uploads/2017/03/dscf0357.jpg"></section>
<section id="sec_3" class="img_container" data-img="http://www.lifeofpix.com/wp-content/uploads/2016/05/Life-of-Pix-free-stock-street-lights-wall-PaulJarvis.jpg"></section>
<section id="sec_4" class="img_container" data-img="http://www.lifeofpix.com/wp-content/uploads/2017/03/1-276.jpg"></section>

Answer 2

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.