Изображение не определено даже при загрузке

Question

На странице у меня есть такой переход, что при наведении курсора на кнопку фоновое изображение изменится на весь div. Это работает довольно хорошо в Chrome, но есть серый миг на долю секунды для всего деления, когда я наведите курсор на кнопку, а затем загрузится изображение. Когда я открываю консоль, она говорит, что изображение не определено, поэтому, возможно, это как-то связано с серым миганием. Также, когда я пробую этот код в Firefox, плавного перехода, как в Chrome, не происходит. Любые идеи, как это исправить или как переписать код, чтобы он работал?

$(function() {
  $(".strip").mouseover(function() {
    var curImg = $(this).attr("data-image");

    $(".banner-img").css("background-image", "url(" + curImg + ")");
  });

  $(".strip").mouseout(function() {
    $(".banner-img img").css("opacity", ".8");
    $(".banner-img img").attr("src", image); // SET DEFAULT IMAGE WHEN MOUSE OUT
  });
});

.banner {
  width:100%;
  height:100vh;
  vertical-align:middle;
  }
  
   .banner-img {
  position:absolute;
  width:100%;
  height:100vh;
  background-color:#000;
  transition:background-image .2s ease;
  -webkit-transition: background-image .2s ease;
  -moz-transition: background-image .2s ease;
  -o-transition: background-image .2s ease;
  
  background: url(http://via.placeholder.com/640x360
) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  box-shadow:inset 0 0 0 100vw rgba(0,0,0,0.3) ;
  }
  
    .banner-img img {
  transition:background-image .2s ease;
  }
  
  .banner-strip {
  display:flex;
  align-items:center;
  justify-content:space-around;
  height:100vh;
  flex-direction:row!important;
  }
  
  @media (max-width:554px) {
  .banner-strip {
  flex-direction:column!important;
  }
  }
  
  .strip {
  position:relative;
  width:20%;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  color:#fff;
  }
  
  .strip img {
  display:block;
  width:60px;
  height:60px;
  opacity:0;
  transition:all .5s ease;
  }
  
  .strip:hover img {
  opacity:1;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner" data-aos="fade">
  <div class="banner-img" style="height:100vh">

  </div>

  <div class="banner-strip">
    <div class="strip" data-image="http://via.placeholder.com/1000x1000
">

      <a href="tattoo-en.html ">
        <button class="btn1 gold brk-btn">Tattoo</button>
      </a>

      <br>
      <br>
      <a href="tattoo.html">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="tattoo-icon" class="floating-icons" style="width: 65px; height:65px">
      </a>

    </div>
    <div class="strip" data-image="http://via.placeholder.com/1100x1100
">
      <a href="beauty-en.html">
        <button class="btn1 gold mb-4  brk-btn">Beauty</button>

      </a>

      <a href="beauty.html">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="mascara-icon" class="floating-icons" style="width: 60px; height:60px">
      </a>

    </div>
    <div class="strip" data-image="http://via.placeholder.com/1200x1200"
>
      <a href="piercing-en.html">
        <button class="btn1 gold mb-4  brk-btn">Piercing</button>

      </a>
      <a href="piercing.html">
        <img src=https://via.placeholder.com/150

C/O https://placeholder.com/ alt="piercing-cion" class="floating-icons" style="width: 60px; height:60px">
      </a>


    </div>

  </div>
</div>

Answer 1

Сохранить путь к изображению по умолчанию в атрибуте data-img 'banner-img' . При наведении курсора обновите изображение на основе атрибута "data-image" strip div и при наведении мыши верните изображение по умолчанию из атрибута 'data-img' . Я обновил имя изображения до моего локального пути к изображению.

См. Пример ниже

$(function () {
            
            $(".strip").mouseover(function () {
                var curImg = $(this).attr("data-image");
                $(".banner-img").css("background-image", "url(" + curImg + ")");
            });

            $(".strip").mouseout(function () {
                var image = $(".banner-img").attr('data-img');
                $(".banner-img").css("opacity", ".8");
                               $(".banner-img").css("background-image", "url(" + image + ")");
            });
        });

.banner {
            width: 100%;
            height: 100vh;
            vertical-align: middle;
        }

        .banner-img {
            position: absolute;
            width: 100%;
            height: 100vh;
            background-color: #000;
            transition: background-image .2s ease;
            -webkit-transition: background-image .2s ease;
            -moz-transition: background-image .2s ease;
            -o-transition: background-image .2s ease;

            background: url(http://via.placeholder.com/640x360) no-repeat center center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.3);
        }

      

        .banner-img img {
            transition: background-image .2s ease;
        }

        .banner-strip {
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 100vh;
            flex-direction: row !important;
        }

        @media (max-width:554px) {
            .banner-strip {
                flex-direction: column !important;
            }
        }

        .strip {
            position: relative;
            width: 20%;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: #fff;
        }

        .strip img {
            display: block;
            width: 60px;
            height: 60px;
            opacity: 0;
            transition: all .5s ease;
        }

        .strip:hover img {
            opacity: 1;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <div class="banner" data-aos="fade">
        <div class="banner-img" data-img="http://via.placeholder.com/640x360" style="height:100vh">

        </div>

        <div class="banner-strip">
            <div class="strip" data-image="http://via.placeholder.com/1000x1000">

                <a href="tattoo-en.html ">
                    <button class="btn1 gold brk-btn">Tattoo</button>
                </a>

                <br>
                <br>
                <a href="tattoo.html">
                    <img src="images/Tattoo-machine-Icon-4.png" alt="tattoo-icon" class="floating-icons"
                        style="width: 65px; height:65px">
                </a>

            </div>
            <div class="strip" data-image="http://via.placeholder.com/1100x1100">
                <a href="beauty-en.html">
                    <button class="btn1 gold mb-4  brk-btn">Beauty</button>

                </a>

                <a href="beauty.html">
                    <img src="images/mascara.png" alt="mascara-icon" class="floating-icons"
                        style="width: 60px; height:60px">
                </a>

            </div>
            <div class="strip" data-image="http://via.placeholder.com/1200x1200">
                <a href="piercing-en.html">
                    <button class="btn1 gold mb-4  brk-btn">Piercing</button>

                </a>
                <a href="piercing.html">
                    <img src="images/piercing_icon2_white.png" alt="piercing-cion" class="floating-icons"
                        style="width: 60px; height:60px">
                </a>


            </div>

        </div>
    </div>