Как мне сделать более высокую загрузку z-индекса перед более низким z-индексом

Я создаю веб-сайт, который использует GIF-файлы за фоновыми изображениями для многослойного фона.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я перехожу на новую страницу в своем веб-приложении, gif (тот, что с более низким z-индексом) будет мигать в течение миллисекунды при входе на страницу, а затем фоновое изображение будет загружаться поверх него. Таким образом, фоновый gif становится фоновым изображением, пока реальное фоновое изображение не загрузится поверх него.

Самый простой способ понять, что я имею в виду, — это попробовать демо-версию jsfiddle. Если вы нажмете красное поле, чтобы перейти на следующую страницу, а затем вернетесь на предыдущую страницу с помощью кнопки «Назад» в браузере, вы увидите вспышку. Есть ли способ избавиться от этого?

Демонстрация 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>

Надеюсь, кто-то может помочь :)


image css z-index flashing
person benimsson    schedule 04.10.2020    source источник
comment
Вам нужно сжать размер изображения окна. Это большое изображение, поэтому загрузка занимает некоторое время.   -  person Ishita Ray    schedule 04.10.2020
comment
Я понимаю. В моем веб-приложении фактическое изображение (не окно) довольно сжато, но его размер составляет около 3 МБ, поэтому я попытаюсь сжать его еще больше.   -  person benimsson    schedule 04.10.2020
comment
Сжал png до 800k, а он все равно мигает :/   -  person benimsson    schedule 05.10.2020

Ответы (3)


arrow_upward
1
arrow_downward

Я не знаю, соответствует ли это решение вашим требованиям, но вы можете использовать загрузочный gif, пока все ваши изображения не будут загружены. И фактическая страница будет отображаться после того, как все будет установлено.

Для этого добавьте тег div в тело html:

<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");
})
person Akshay    schedule 04.10.2020
comment
Хм, на самом деле не подходит для моего сайта, так как мое приложение работает как мини-игра, в которой пользователь должен перемещаться по разным страницам с одной и той же структурой изображения, добавление загружаемого gif на каждую новую страницу отвлекает от опыта. Спасибо за ваш совет. - person benimsson; 04.10.2020
comment
Опять же, я не уверен в альтернативном решении, но, если возможно, вы можете отображать фоновый gif после определенного времени загрузки страницы. Эта ссылка может вам помочь — stackoverflow.com/questions/40632019/ - person Akshay; 05.10.2020

arrow_upward
0
arrow_downward

Установите свойство z-index в качестве атрибута в вашем HTML-теге. Поэтому, когда html загружается, тег будет с желаемым z-индексом.

атрибут стиля переопределяет любой стиль, установленный глобально, например стили, указанные в теге или во внешней таблице стилей.

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

person Sam    schedule 04.10.2020
comment
К сожалению, это не сработало, проблема все еще сохраняется :/ - person benimsson; 04.10.2020

arrow_upward
0
arrow_downward 

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

Пожалуйста, посмотрите это. Я использовал другое изображение окна. Я думаю, вам нужно сменить образ.

person Ishita Ray    schedule 05.10.2020