1

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>

8
  • poderia colocar o codigo que está utilizando do lazysizes? Commented 2/03/2018 às 22:22
  • vc deverá colocar provavelmente no callback do carregamento da imagem algo como $(this).parents("div.image-wrap").removeClass("image-wrap"); mas para dar a resposta correta é preciso inserir isso no seu código Commented 2/03/2018 às 22:24
  • @KarlZillner eu apenas chamo a classe padrão "lazyload" da lib LazySizes.min.js e tudo funciona como pretendido. Commented 2/03/2018 às 23:02
  • Vou colocar um exemplo aqui no stack. Commented 2/03/2018 às 23:03
  • @KarlZillner postei o código. Commented 2/03/2018 às 23:15

2 Respostas 2

1

Pode colocar a primeira classe em todos os elementos com .image-wrap no carregamento da página, e usar on load para detectar quando a imagem é carregada. Adicionei também on error para aplicar o mesmo efeito caso o carregamento da imagem falhe (o on error é opcional, pode retirar se desejar).

No exemplo abaixo eu coloquei a primeira classe com fundo vermelho, e a segunda com fundo azul:

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

Pode usar também os eventos do plugin, lazybeforeunveil e lazyloaded, só que eles não detectam quando o carregamento da imagem falha:

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

6
  • ,Essa solução funciona muito bem até certo ponto. Apenas nos items visíveis, com scroll ela não funciona. Esse lazysizes carrega imagens quando elas ficam visíveis. Commented 3/03/2018 às 2:36
  • Sim, de fato, algumas imagens realmente carregam antes de ficar visivel, eu executei agora o seu código, e a ultima imagem carrega, mas está vermelha. Commented 3/03/2018 às 2:48
  • testei, está do mesmo jeito, eu consegui resolver mais ou menos com isso $(window).on("load resize scroll",function(e){ funciona como esperado. Mas existe um atraso, o efeito continua por um tempo mesmo com a imagem carregada. Commented 3/03/2018 às 2:57
  • O correto é usar onload. Alterei a resposta.
    – Sam
    Commented 3/03/2018 às 4:41
  • 1
    Funciona também, ele tá usando os eventos do plugin. Eu havia visto isso na documentação do plugin mas achei meio confuso as explicações e resolvi fazer do meu jeito. Mas funciona também.
    – Sam
    Commented 3/03/2018 às 17:49
0

Tenta fazer do seguinte modo usando JQuery:

$('.lazyload').parent().removeClass('image-wrap')
2
  • safadenho voce kkk Commented 2/03/2018 às 23:03
  • Testei sua solução, mas não funcionou como esperava, adicionei um exemplo na questão. Commented 2/03/2018 às 23:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .