Не работает анимация загрузки нескольких изображений

Question

У меня есть два изображения на моей странице html, и я использую jquery, чтобы проверить, полностью ли они загружены, перед удалением оверлея кругового загрузчика (индивидуально для каждого изображения). Таким образом, в начале наложение с анимацией загрузчика показывается на каждом изображении, и каждый раз, когда изображение загружается, наложение выключается. Но с моим текущим кодом оверлей вообще не отключается.

<div class="img" id="img1">
    <div class="image-loader">
        <div class="cssload-speeding-wheel"></div>
    </div>
</div>

<div class="img" id="img2">
    <div class="image-loader">
        <div class="cssload-speeding-wheel"></div>
    </div>
</div>

$(document).ready(function(){
    $('.img').each(function(){
        let img = $(this).css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");
        $('<img/>').attr('src', img).on('load', function() {
            $('#' + $(this).attr('id') + ' .image-loader').hide();
        });
    });
});

Код работал для одного изображения:

$(document).ready(function(){

    let img = $('#img1').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");
    $('<img/>').attr('src', img).on('load', function() {
        $('#img1 .image-loader').hide();
    });

});

У кого-нибудь есть решение для это? спасибо

Answer 1

this внутри вашей функции load относится к элементу dynamici c $('<img/>'). Таким образом, $(this).attr('id') равно undefined, и ни один из загрузчиков не исчезает.

Вам необходимо предварительно сохранить ссылку и использовать ее, как показано:

$(document).ready(function() {
  $('.img').each(function() {
    let img = $(this).css('background-image').replace('url(', '').replace(')', '').replace(/\"/gi, "");
    let id = $(this).attr('id')
    $('<img/>').attr('src', img).on('load', function() {      
      $('#' + id + ' .image-loader').hide();
    });
  });
});

body {
  margin: 0
}

.view {
  height: 100vh;
  width: 100vw;
  background-color: blanchedalmond;
  display: grid;
  place-content: center;
}

.img {
  background-position: center center;
  background-size: cover;
  height: 50vh;
  width: 50vw;
}

#img1 {
  background-image: url('https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73751/world.topo.bathy.200407.3x5400x2700.jpg');
}

#img2 {
  background-image: url('https://edmullen.net/test/rc.jpg');
}

.image-loader {
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.cssload-speeding-wheel {
  width: 49px;
  height: 49px;
  margin: 0 auto;
  border: 5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: cssload-spin 800ms infinite linear;
  -o-animation: cssload-spin 800ms infinite linear;
  -ms-animation: cssload-spin 800ms infinite linear;
  -webkit-animation: cssload-spin 800ms infinite linear;
  -moz-animation: cssload-spin 800ms infinite linear;
}

@keyframes cssload-spin {
  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes cssload-spin {
  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes cssload-spin {
  100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes cssload-spin {
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="view">

  <div class="img" id="img1">
    <div class="image-loader">
      <div class="cssload-speeding-wheel"></div>
    </div>
  </div>

  <div class="img" id="img2">
    <div class="image-loader">
      <div class="cssload-speeding-wheel"></div>
    </div>
  </div>

</div>