0

Bom dia!

Eu realizei uma personalização para uma página, onde usei javascript para mostrar aleatoriamente uma imagem quando recarregada.

Não possuo conhecimento de Javascript, vi um video no youtube e consegui fazer assim

var imagens = new Array ('') ;
imagens[0] = '<img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/conjuntos-inverno-longo.png"}}" alt="Conjuntos de Inverno" />';
imagens[1] = '<img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/conjuntos-inverno-longo_2_.png"}}" alt="Conjuntos de Inverno" />';
imagens[2] = '<img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/conjuntos-inverno-longo_4_.png"}}" alt="Conjuntos de Inverno" />';
imagens[3] = '<img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/conjuntos-inverno-longo_3_.png"}}" alt="Conjuntos de Inverno" />';

aleatorio = Math.floor (Math.random () * imagens.length)
document.write (imagens[aleatorio])

Porém os outros banners carregam antes, deixando um experiencia ruim para o publico.

Eu consigo colocar as imagens no css com um display: none; e com javascript escolher uma para mostrar? Caso consiga isso fara que o carregamento da página seja "uniforme"?

.promocao-inverno {

margin: auto;

}

.supercompo {

   margin-top: 30px;
   display: block;
   width: 50%;

}

.imagem-conjunto {

    max-width: 40%;
    float: right;
    height: 100%;
    margin-top: 5%;
    display: none;
   

}


.banner img{

margin: 10px;

}

.banner img:hover{
  -webkit-filter: drop-shadow(5px 5px 5px rgba(60, 35, 35, 0.55));
   filter:         drop-shadow(5px 5px 5px rgba(60, 35, 35, 0.55)); 
}

.banner {

    max-width: 40%;
    float: left;
    margin-bottom: 5%;
    margin-top: 2%;
}
<div class="container">
<div class="supercompo"><img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/super_combos.png"}}" alt="" /></div>
<div class="imagem-conjunto"><script>

var imagens = new Array ('') ;
imagens[0] = '<img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/conjuntos-inverno-longo.png"}}" alt="Conjuntos de Inverno" />';
imagens[1] = '<img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/conjuntos-inverno-longo_2_.png"}}" alt="Conjuntos de Inverno" />';
imagens[2] = '<img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/conjuntos-inverno-longo_4_.png"}}" alt="Conjuntos de Inverno" />';
imagens[3] = '<img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/conjuntos-inverno-longo_3_.png"}}" alt="Conjuntos de Inverno" />';

aleatorio = Math.floor (Math.random () * imagens.length)
document.write (imagens[aleatorio])

</script></div>
<div class="banner">
<a href="https://www.boutiqueinfantil.com.br/4-conjuntos-por-89"><img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/4_Conjuntos_89.png"}}" alt="4 Conjuntos por apenas 89,90" /></a>
<a href="https://www.boutiqueinfantil.com.br/5-conjuntos-por-99"><img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/5_Conjuntos_99.png"}}" alt="5 Conjuntos por apenas 99" /></a>
<a href="https://www.boutiqueinfantil.com.br/6-conjuntos-por-139"><img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/6_conjuntos.png"}}" alt="6 Conjuntos por apenas 139 com frete gratis" /></a>
<a href="https://www.boutiqueinfantil.com.br/8-conjuntos-por-169"><img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/8_conjuntos.png"}}" alt="8 Conjuntos por apenas 169 com frete gratis" /></a>
<a href="https://www.boutiqueinfantil.com.br/12-conjuntos-por-239"><img src="{{media url="wysiwyg/Paginas/ConjuntosInverno/12conjuntos.png"}}" alt="12 Conjuntos por apenas 239 com frete gratis" /></a>
</div>
</div>

5
  • não consegui entender o que o javascript tem a ver com os banners 6/03/2019 às 13:39
  • O carregamento de imagens é assíncrono. O tempo que ela leva para ser exibida pode variar de acordo com o seu peso, da conexão com o servidor etc. Colocar tudo com display: none não é uma boa opção porque vc vai carregar 3 imagens à toa (mesmo que elas fiquem escondidas). Pra mim, a melhor opção mesmo é escolher uma e carregar, como vc fez. Agora, pq vc chama de experiência ruim ao público? Qual a relação dos banners com a imagem?
    – Sam
    6/03/2019 às 13:44
  • @Sam da uma conferida as imagens carregadas pelo script caregam bem depois dos banners em css boutiqueinfantil.com.br/conjuntos-inverno-longo
    – JVEUZEBIO
    6/03/2019 às 13:59
  • @Sam isso tem a ver só com o peso da imagem ?
    – JVEUZEBIO
    6/03/2019 às 14:00
  • A imagem tem 160KB e os banners cerca de 13KB cada. 160KB irá demorar mais mesmo. Por iso às vezes é bom usar um loader animado mostrando que algo está sendo carregado ali.
    – Sam
    6/03/2019 às 14:05

1 Resposta 1

3

Você pode esconder os banners e mostrá-los apenas quando a imagem aleatória for carregada, adicionando o evento onload na tag da imagem.

var imagens = new Array('')
imagens[0] = '<img ... onload="mostrarBanners()"/>'
imagens[1] = '<img ... onload="mostrarBanners()"/>'
imagens[2] = '<img ... onload="mostrarBanners()"/>'
imagens[3] = '<img ... onload="mostrarBanners()"/>'

function mostrarBanners() {
    // Código para mostrar o banner aqui
}

document.write(imagens[Math.floor(Math.random() * imagens.length)])

Porém, eu aconselho a colocar a tag <script> que contém o código acima após a tag <div class="banner">...</div>, para se caso a imagem carregar antes do banner (por qualquer motivo citado no comentário do @Sam), o mostrarBanners() não tentar encontrar a div antes dela ser definida.

Edit: Adicionei mais duas maneiras de esconder e mostrar os banners, veja

Usando display

.banner {
    display: none;
}
function mostrarBanners() {
    document.getElementsByClassName('banner')[0].style.display = 'inline'
}

Usando visibility

.banner {
    visibility: hidden;
}
function mostrarBanners() {
    document.getElementsByClassName('banner')[0].style.visibility = 'visible'
}

Usando opacity

.banner {
    opacity: 0;
}
function mostrarBanners() {
    document.getElementsByClassName('banner')[0].style.opacity = 1
}
3
  • Legal a ideia, mas não funcionou. Prevaleceu o display: none; O que poderia ser?
    – JVEUZEBIO
    7/03/2019 às 12:41
  • @JVEUZEBIO, adicionei mais propriedades do CSS que você pode alterar para produzir o "mesmo" efeito, aqui funcionou, caso não funcione comente de novo, veja se algo aparece no console.
    – g-otn
    7/03/2019 às 15:59
  • Cara deu certinho com hidden, valeuzão!
    – JVEUZEBIO
    7/03/2019 às 20:20

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 .