How to show only 1 image with Javascript

Question

Good morning!

I performed a customization for a page, where I used javascript to randomly show an image when reloaded.

I have no knowledge of Javascript, I saw a video on youtube and I managed to do so

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])

But the other banners carry before, leaving a bad experience for the public.

I can put the images in css with a display: None; and with javascript choose one to show? If you get this you will make the page load "uniform"?

.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>

Answer 1

You can hide the banners and show them only when the random image is loaded by adding the event onload in the image tag.

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)])

However, I advise you to tag <script> containing the above code after tag <div class="banner">...</div>, if the image is uploaded before the banner (for any reason mentioned in the @Sam comment), mostrarBanners() do not try to find the div before it is set.

Edit: I added two more ways to hide and display the banners, see

Using display

.banner {
    display: none;
}

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

Using visibility

.banner {
    visibility: hidden;
}

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

Using opacity

.banner {
    opacity: 0;
}

function mostrarBanners() {
    document.getElementsByClassName('banner')[0].style.opacity = 1
}