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 :)

You need to compress the image size of window. It's a large image that's why it is taking some time to load. — Ishita Ray, Oct 04 '20 at 13:44
I see. On my web app the actual image (not the window one) is pretty compressed, but its about the size of 3MB, so I will try to compress it even more then. — benimsson, Oct 04 '20 at 13:59

score 1 · Answer 1 · answered Oct 04 '20 at 13:38

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");
})

answered Oct 04 '20 at 13:38

Akshay

126
6

Hm, won't really suite my site as my app works as a mini-game where user has to navigate through different pages with this same image structure , adding a loading gif on every new page will take away from the experience. Thanks for your advice tho. – benimsson Oct 04 '20 at 13:57
Again I am not sure about the alternative solution but if possible, you can display background gif after specific time of page load. This link may help you - https://stackoverflow.com/questions/40632019/how-to-show-div-after-a-specific-time-of-page-load – Akshay Oct 05 '20 at 07:27

score 0 · Answer 2 · answered Oct 04 '20 at 13:43

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>

This did unfortunately not work, problem still persists :/ – benimsson Oct 04 '20 at 13:52 — benimsson, Oct 04 '20 at 13:52

score 0 · Answer 3 · answered Oct 05 '20 at 19:01

    .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.

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

3 Answers3