Элемент не спрячется - Jquery

Question

У меня есть несколько упаковщиков, которые содержат загрузочный GIF во время загрузки реального изображения.

У меня также есть jquery, который должен скрывать GIF-файл после загрузки реального изображения, но загрузочный GIF-файл не скрывается. Если я заменю $ (this) на $ (". DisplayImg"), это будет работать, но это повлияет на все загрузочные GIF-файлы. Почему $ (this) не скрывает это?

$('.displayImg').on("load", function() {
  $(this).parent().find(".loadingImage").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper'>
  <img class='loadingImage' src='https://media0.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif'>

  <img class='displayImg' src='https://via.placeholder.com/350x150'>
</div>

<div class='wrapper'>
  <img class='loadingImage' src='https://media0.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif'>

  <img class='displayImg' src='https://via.placeholder.com/200x100'>
</div>

Answer 1

Ваш код работает нормально, но вы можете улучшить его следующим образом:

$('.displayImg').on("load", function() {
  $(this).prev(".loadingImage").hide();
});

Answer 2

Вам вообще не нужно использовать Javascript. Одним из способов является размещение загрузчика в качестве фонового изображения. Когда фактическое изображение загружается (при условии, что оно не имеет никакой прозрачности), оно покрывает загрузчик. И вы можете изменить размер и позиционировать загрузчик так, как вам нравится.

.wrapper1 {
  width: 350px;
  height: 150px;
  background-image: url(https://media0.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif);
}

.wrapper2 {
  width: 200px;
  height: 100px;
  background-image: url(https://media0.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif);
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

<div class='wrapper1'>
  <img class='displayImg' src='https://via.placeholder.com/350x150'>
</div>

<div class='wrapper2'>
  <img class='displayImg' src='https://via.placeholder.com/200x100'>
</div>