Only show background image once it’s fully loaded

  • Post author:
  • Post category:PMF
  • Post comments:1 Comment

This is to stop a stuttered appearance of background images. The image will only show once it’s fully loaded.

<!-- html -->
<section id="frontPageFirstSectionContainer">

<section>
<script>
/* This makes sure the background image only displays when the
page is fully loaded */
var img=new Image();
img.onload = function() {
var backgroundElement= document.getElementById("frontPageFirstSectionContainer");
backgroundElement.style.backgroundImage = "url('"+this.src+"')";
backgroundElement.style.backgroundRepeat= "no-repeat";
backgroundElement.style.backgroundSize= "cover";
};
img.src = "/webimages/boris-debusscher-9Rtp9uvTs3Q-unsplash-1920x1080.jpg?t=" + "?_=" + (+new Date());

</script>

  /*first page section CSS*/
  #frontPageFirstSectionContainer {
    display:flex;
    flex-direction: column;
    align-items: center;
    background: gray;
    /*background-image: url("/webimages/boris-debusscher-9Rtp9uvTs3Q-unsplash.jpg");
    background-repeat: no-repeat;
    background-size: cover;*/
    width: 100%;
  }

This Post Has One Comment

  1. avenue17

    It agree, your idea simply excellent

Leave a Reply