Estou utilizando o LazySizes para carregar imagens progressivamente. https://github.com/aFarkas/lazysizes
Esse é o estilo do meu projeto
<div class="image-wrap">
<img class="lazyload" src="">
</div>
Quando as imagens estão carregando, a tag IMG ganha uma nova classe lazyloading e ao finalizar o carregamento, ela é substituída pela classe lazyloaded
O que eu gostaria de fazer é, colocar ou remover uma classe na DIV.image-wrap, baseado na classe .lazyloading do elemento IMG.
<script src="https://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>
$(this).parents("div.image-wrap").removeClass("image-wrap");
mas para dar a resposta correta é preciso inserir isso no seu código