Class sendo adicionada em apenas um elemento do laço de repetição (PHP)

15/02/2019

0

Caros programadores! Entendo muito pouco de Javascript / jquery, meu forte mesmo é Php e Css, é o seguinte, estou desenvolvendo um sistema há um tempinho e nele estava implementando a LAZY LOAD, aquela famosa técnica de carregamento de imagens que só são carregadas quando o usuário rola a página até onde elas estão, optei pela API Intersection Observer, só que algumas versões do IE não a suportam, pensando nisso decidi criar uma verificação para aparecer uma mensagem caso o navegador não suporte, até aqui tudo bem consegui com o seguinte código abaixo:



if ("IntersectionObserver" in window === false){
$("#image-load").append("<p class='p_um no-img'>Seu navegador não suporta a API, atualize a versão ou tente acessar com outro. </p>")

;}



Este código acima cria uma nova Div dentro do container #image-load com a mensagem que queria, (este container #image-load está em um laço de repetição cada imagens que tenho no WHILE também saem com esse container) o problema é que as minhas imagens estão em um Laço de repetição no PHP e o código está apenas funcionando no primeiro elemento do WHILE, quebrei a cabeça e não consegui nada além! Segue abaixo a maneira que está sendo impressa o while no HTML!





<div class="cover-det" id="image-load">

<img data-src="img-1.jpg">

<p class='p_um no-img'>

Seu navegador não suporta a API, atualize a versão ou tente acessar com outro.

</p>

</div>



<div class="cover-det" id="image-load">

<img data-src="img-2.jpg">

</div>



<div class="cover-det" id="image-load">

<img data-src="img-3.jpg">

</div>



e assim vai...







a minha pergunta é a seguinte: Como fazer essa mensagem ser reproduzida em todas as imagens desse meu while no PHP?



AGRADEÇO A COLABORAÇÃO DE TODOS.
Caio Lourençon

Caio Lourençon

Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar