如何在较低的 z-index 之前使较高的 z-index 负载

Question

我正在构建一个网站，该网站在背景图像后面使用 gif 到一种分层背景。

我遇到的问题是，当我导航到我的网络应用程序内的新页面时，gif（z-index 较低的那个）将在进入页面时闪烁一毫秒，然后背景图像将加载到顶部其中。所以它就像背景 gif 变成了背景图片，直到真正的背景图片加载到它上面。

理解我的意思最简单的方法是尝试演示 jsfiddle，如果你按下红色框转到下一页，然后使用浏览器返回按钮返回上一页，你会看到 flash。有没有办法摆脱这个？

JSfiddle 演示 https://jsfiddle.net/4rypj8we/1/

这里也是代码

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

希望有人可以提供帮助:)

Answer 1

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

请看这个。我使用了另一个窗口图像。我认为您需要更改图像。

Answer 2

将 z-index 属性设置为 html 标记中的属性。因此，当加载 html 时，标签将具有所需的 z-index。

style attribute 将覆盖全局设置的任何样式，例如在标签或外部样式表中指定的样式。

    .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

我不知道这个解决方案是否符合您的要求，但您可以使用加载 gif 直到所有图像都加载完毕。一切设置好后，就会显示实际页面。

为此在 html 正文中添加一个 div 标签：

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

在您的样式表（.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);
}

最后是一个 jQuery：

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