3

Criei uma espécie de lazyload (pré-carregamento de imagens) em JavaScript com o evento scroll onde algumas imagens só são carregadas quando elas entrarem na área visível da janela.

Para isso criei uma imagem genérica de 1x1 pixel transparente (dt.png) e coloquei no src das imagens e um atributo data-src com o caminho da respectiva imagem:

<img src="dt.png" data-src="img/foto1.jpg" class="lazyload">
<img src="dt.png" data-src="img/foto2.jpg" class="lazyload">

Ao fazer scroll, o código JavaScript irá verificar se a imagem está dentro do viewport da janela, se estiver irá substituir o valor de src por data-src carregando e exibindo a imagem. Até aqui tudo certo.

O problema é que gostaria que não ficasse uma área vazia no lugar da imagem, mas que houvesse nessa área um texto do tipo "Carregando imagem...", isso porque as vezes a imagem leva alguns segundos para ser carregada e dá a impressão que houve alguma falha. Enfim, gostaria que o usuário soubesse que ali será exibida a imagem.

Tentei fazer isso usando a pseudo-classe ::before na tag <img> e até funciona se o src estiver vazio:

.lazyload::before{
   content: 'Carregando imagem...';
   position: absolute;
   right: 3px;
   top: 3px;
}

div{
   width: 300px;
   background: red;
   padding: 15px;
   color: white;
   text-align: center;
}

img{
   position: relative;
   width: 300px;
   height: 200px;
}
<div>
   <img src="" data-src="img/foto1.jpg" class="lazyload">
   <p>Texto qualquer</p>
</div>

Mas com o src vazio não é interessante porque mostra o "ícone de imagem partida" além de uma borda.

Agora com o PNG transparente, o texto do ::before não aparece (mesmo o PNG sendo transparente):

.lazyload::before{
   content: 'Carregando imagem...';
   position: absolute;
   right: 3px;
   top: 3px;
}

div{
   width: 300px;
   background: red;
   padding: 15px;
   color: white;
   text-align: center;
}

img{
   position: relative;
   width: 300px;
   height: 200px;
}
<div>
   <img src="https://i.stack.imgur.com/Qk53m.png" data-src="img/foto1.jpg" class="lazyload">
   <p>Tem uma imagem transparante aqui em cima</p>
</div>

Analisando na inspeção de elementos do navegador, notei que quando o src está vazio ou com um caminho de imagem que não existe, o nó do ::before aparece, mas quando coloco um caminho de imagem correto, o ::before some.

Existe alguma forma de fazer esse ::before ficar visível mesmo com o PNG transparente no src ou uma outra solução possível para esse caso usando CSS?

5
  • É interessante que neste vídeo esta técnica é usada e essa imagem cortada não aparece, talvez ela seja um comportamento default do browser que mudou. Uma ideia: e se você colocasse no src - ao invés do pixel transparente - um gif de ampulheta para o carregamento, o mesmo para todas as imagens, e depois mudasse o src - quando o scroll fosse feito - para a imagem correta?
    – Douglas
    29/09/2018 às 19:10
  • Oi @Douglas. Eu pensei nisso também da ampulheta, mas as imagens são de tamanhos variados e não fica legal, vai ficar distorcida.
    – Sam
    29/09/2018 às 19:16
  • Bolei uma solução usando onload da imagem a ser carregada e um gif para o carregamento que fica centralizado na div que a imagem irá aprecer dentro, e some quando a imagem é carregada, veja no fiddle. O botão "carregar" simula a chamada a função que será chamada ao rolar a página. Não coloquei como resposta porque sua pergunta é mais sobre resolver com CSS e sobre esclarecer o comportamento do ::before, mas acho que pode te ajudar de qualquer modo.
    – Douglas
    29/09/2018 às 20:14
  • Se você decidir usar o onload em imagens, veja essa issue sobre image.onload event and browser cache, não estudei a fundo mas parece ser um problema sobre o onload não ser disparado se a imagem já estiver no cache do Browser. Não tive esse tipo de problema no exemplo que fiz no fiddle.
    – Douglas
    29/09/2018 às 20:22
  • @Douglas é, eu acho que vou ter que usar jQuery nisso mesmo, até porque as imagens não possuem um contêiner próprio e não daria pra centralizar uma outra imagem exatamente na área da imagem principal. Tive pesquisando e realmente não dá pra usar pseudo-classes em tags <img>. A sua ideia é até funcional, mas eu tive uma ideia melhor onde eu não preciso mexer no HTML. Valeu pela força
    – Sam
    29/09/2018 às 20:32

1 Resposta 1

4

Não faz sentido usar o pseudoelemento ::before com <img>, pois essa tag não tem conteúdo (não tem tag de fechamento). Apesar do nome confuso, o ::before cria um pseudoelemento antes do conteúdo do elemento especificado no seletor (ou seja, na posição de primeiro filho), e não antes do próprio elemento selecionado.

Em termos práticos, coloque o pseudoelemento num elemento externo à imagem.

1
  • É, vou fazer isso com JS mesmo. Obg!
    – Sam
    29/09/2018 às 21:33

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 .