Only show background image once it’s fully loaded

  • Post author:
  • Post category:PMF
  • Post comments:0 Comments

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

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

/* 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"); = "url('"+this.src+"')"; "no-repeat"; "cover";
img.src = "/webimages/boris-debusscher-9Rtp9uvTs3Q-unsplash-1920x1080.jpg?t=" + "?_=" + (+new Date());


  /*first page section CSS*/
  #frontPageFirstSectionContainer {
    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%;

Leave a Reply