将类添加到父 IMG - LazySizes

debugcn 发表于 Dev

约翰奇美拉

使用lazysizes，图像将一张一张地进行。IMG 元素中的默认类是lazyload，当加载图像时，lazyloading类在它旁边起作用，当该图像加载完成时，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>

约翰奇美拉

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。