Remove Class from a div Parent based on child element class

Asked

Viewed 661 times

1

I’m using Lazysizes to load images progressively. https://github.com/aFarkas/lazysizes

That’s the style of my project

<div class="image-wrap"> <img class="lazyload" src=""> </div>

When images are loading, the IMG tag gains a new class lazyloading and upon completion of loading, it is replaced by the lazyloaded

What I would like to do is, put or remove a class in DIV.image-wrap, class-based .lazyloading of the IMG element.

<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>

javascript jquery

  • could put the code that is using the lazysizes?

  • you should probably put something like $(this).parents("div.image-wrap").removeClass("image-wrap"); but to give the correct answer you need to insert this into your code

  • @Karlzillner I just call the standard class "lazyload" of lib Lazysizes.min.js and everything works as intended.

  • I’ll put an example here in the stack.

  • @Karlzillner posted the code.

  • As so "based on the class . lazyloading"?

  • @dvd With lazysizes images are loaded one by one. The default class in the IMG element is lazyload and when an image is loading the class lazyloading enters into action next to it, and when the loading of that image is completed, the class lazyloading is replaced by the class lazyloaded what I want now is to use add/remove a class from div.Parent based on classes that go live in IMG.

  • @dvd When the class lazyloading is active in the IMG element, I want another class to be active in the DIV of which the IMG element is inside, and when the lazyloading class is no longer, that the same happens with the div class Parent.

Show 3 more comments

2 answers

1


You can place the first class on all elements with .image-wrap page load, and use on load to detect when the image is loaded. I also added on error to apply the same effect if image loading fails (the on error is optional, can withdraw if desired).

In the example below I put the first class with red background, and the second with blue background:

$(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>

Edit

You can also use the plugin events, lazybeforeunveil and lazyloaded, only they do not detect when image loading fails:

$(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>

  • ,This solution works very well to a certain extent. Only in visible items, with scroll it does not work. This lazysizes loads images when they become visible.

  • Yes, in fact, some images actually load before being visible, I just ran your code, and the last image loads, but it’s red.

  • tested, it is the same way, I managed to solve more or less with this $(window).on("load resize scroll",function(e){ works as expected. But there is a delay, the effect continues for a while even with the image loaded.

  • The correct is to use onload. I changed the answer.

  • Yesterday I had also posted this question on the Issue of this lib on github, I saw here now that the author answered me, look at his answer: https://github.com/aFarkas/lazysizes/issues/474

  • 1

    It works too, it is using the plugin events. I had seen this in the plugin documentation but I found the explanations a bit confusing and decided to do it my way. But it works too.

Show 1 more comment

0

Try doing it this way using Jquery:

$('.lazyload').parent().removeClass('image-wrap')

  • naughty Voce kkk

  • I tested your solution, but it did not work as expected, I added an example in the question.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.