How do i make higher z-index load before lower z-index

Question

I am building a website which uses gifs behind the background images to a type of layered background.

The problem I am having is that when i navigate to a new page inside my web app the gif (the one with the lower z-index) will for a millisecond flash upon entering the page and then the background image will load ontop of it. So its like the background gif becomes the background image, until the real background image loads ontop of it.

The easiest way to understand what I mean is to try out the demo jsfiddle, if you press the red box to go to next page and then go back to previous page using the browser back button, you will see the flash. Is there a way to get rid of this?

JSfiddle demo https://jsfiddle.net/4rypj8we/1/

Here is the code also

    .bg {
     z-index: -100;
     padding: 0;
     top: 0;
     }

    .bg img {
      z-index: -10;
      min-height: 100%;
    
      width: 100%;
      height: 100%;

      position: fixed;
      top: 0;
      left: 0;
      }

      #gif {
      z-index: -15;
      }

   <div class="bg">
        <img
          id="plain"
          src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2F416-4161308_window-transparent-background-window.png?v=1601816253247"
        />

        <img
          id="gif"
          src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2Fgiffram.gif?v=1601804252711"
        />
      </div>
      
      
        <a id="next" href="90.html"> NEXT PAGE  </a>

Hope someone can help :)

Answer 1

I don't know whether this solution suits your requirement, but you can use a loading gif till all your images get loaded. And actual page will be displayed once everything is set.

For that add a div tag in html body:

<div class="loading"></div> 

In your stylesheet(.css):

.loading {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(images/loading.gif) 50% 50% no-repeat rgb(255,255,255);
}

And finally a jQuery:

$(window).on('load', function(){
    $(".loading").fadeOut("slow");
})

Answer 2

Set the z-index property as an attribute in your html tag. So when the html is load the tag will be with the z-index desired.

The style attribute will override any style set globally, e.g. styles specified in the tag or in an external style sheet.

    .bg {
     padding: 0;
     top: 0;
     }

    .bg img {
      min-height: 100%;
    
      width: 100%;
      height: 100%;

      position: fixed;
      top: 0;
      left: 0;
      }

      #gif {
      z-index: -15;
      }

   <div class="bg" style="z-index: -100;">
        <img
          id="plain"
          src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2F416-4161308_window-transparent-background-window.png?v=1601816253247"
        style="z-index: -10;"/>

        <img
          id="gif"
          src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2Fgiffram.gif?v=1601804252711"
         style="z-index: -15;"/>
      </div>
      
      
        <a id="next" href="90.html"> NEXT PAGE  </a>

Answer 3

    .bg {
     z-index: -100;
     padding: 0;
     top: 0;
     }

    .bg img {
      z-index: -10;
      min-height: 100%;
    
      width: 100%;
      height: 100%;

      position: fixed;
      top: 0;
      left: 0;
      }

      #gif {
      z-index: -15;
      }

   <div class="bg">
        <img
          id="plain"
          src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2F416-4161308_window-transparent-background-window.png?v=1601816253247"
        />

        <img
          id="gif"
          src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2Fgiffram.gif?v=1601804252711"
        />
      </div>
      
      
        <a id="next" href="90.html"> NEXT PAGE  </a>

.bg {
  z-index: -100;
  padding: 0;
  top: 0;
}

.bg img {
  z-index: -10;
  width: 598px;
  height: 340px;
  position: fixed;
  top: 0;
  left: 0;
}

#gif {
    z-index: -15;
    width: 545px;
    top: 44px;
    left: 29px;
    height: 401px !important;
}

<div class="bg">
  <img id="plain" src="https://www.pngarts.com/files/4/Window-Download-Transparent-PNG-Image.png" />

  <img width="400px" id="gif" src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2Fgiffram.gif?v=1601804252711" />
</div>


<a id="next" href="90.html"> NEXT PAGE  </a>

Please see this. I have used another window image. I think you need to change the image.