将类添加到父IMG - LazySizes

Question

随着lazysizes图像将逐个携带。 IMG元素中的默认类是 lazyload ，当加载图像时，延迟加载类在它旁边开始操作，并且当该图像的加载完成时，< strong> lazyloading 类被 lazyloaded 类取代我现在想要的是使用基于IMG中变为活动的类来添加/删除div.parent的类。

`<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="">
   </a>
</div>`

<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/sports/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/nature/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/cats/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/business/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/city/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/people/">
   </a>
</div>

</div>

Answer 1

由@dvd解决，@ aFarkas：https://pt.stackoverflow.com/a/280306/95735

$(document).ready(function(){
   $(".image-wrap").addClass("classe1");

   const els = $(".image-wrap").find("img");
   
   els.each(function(){
      $(this).on("load error", function(){
         $(this)
         .closest(".image-wrap")
         .addClass("classe2")
         .removeClass("classe1");
      });
   });
});

/*linhas só para exemplo*/

.classe1{
   background: red;
}

.classe2{
   background: blue;
}

.image-wrap{
   padding: 15px;
   margin: 5px;
   position:relative;
}
.classe1:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    content: "";
    background: #f7f7f7 url(//afarkas.github.io/lazysizes/assets/imgs/loader.gif) no-repeat center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<div class="container">
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/sports/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/nature/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/cats/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/business/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/city/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/people/">
   </a>
</div>

</div>

解决方案＃2

https://github.com/aFarkas/lazysizes/issues/474

$(document).on('lazybeforeunveil lazyloaded', function(e){

  if(e.type == 'lazyloaded'){
    var addClass = 'classe2',
    removeClass = 'classe1';
  }else{
    var addClass = 'classe1',
    removeClass = 'classe2';
  }
  
  $(e.target)
  .closest('.image-wrap')
  .addClass(addClass)
  .removeClass(removeClass);
});

/*linhas só para exemplo*/

.classe1{
   background: red;
}

.classe2{
   background: blue;
}

.image-wrap{
   padding: 15px;
   margin: 5px;
   position:relative;
}
.classe1:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    content: "";
    background: #f7f7f7 url(//afarkas.github.io/lazysizes/assets/imgs/loader.gif) no-repeat center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<div class="container">
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/sports/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/nature/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/cats/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/business/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/city/">
   </a>
</div>
<div class="image-wrap">
  <a href="#">
      <img class="lazyload" data-src="http://lorempixel.com/150/150/people/">
   </a>
</div>

</div>