0

É possível criar um array dinâmico de imagens e o mesmo ser chamado dentro do background-image:url() ?

Com a dica que foi passada por @hugocsl anteriormente, gostaria de reutilizar esta linha de instrução porque ela faz parte de um loader de página ao qual utilizo e me é muito util,

#carrega_imagem {
        position: relative;            
        background-image: linear-gradient(rgba(0, 0, 0, .75) 0%, 
                                          rgba(102, 0, 0, .50) 100%),  
                                          url("images/casa_linda.jpg");
        background-size: cover;
        height: 100%;
        width: 100%;
        top: 100%;
        left: 100%;
}

Onde está o trecho do código url("images/casa_linda.jpg"), é possivel criar um array via javascript ?

Vi isso em Jquery, mas o que mata é a estrutura que uso para este loader.

1
  • Cara vc que só que a imagem fique alternando o tempo inteiro no fundo? Se é só isso da para fazer só com CSS e fazer uma animação com o background trocando as imagens... Se quiser um exemplo simples é só falar.
    – hugocsl
    Commented 26/04/2018 às 23:39

2 Respostas 2

3

É possível sim. Basta criar uma variável para armazenar os valores (link das fotos) e depois utilizar for para percorrer esses valores, por exemplo:

/* Gradiente padrão */
const gradient = "linear-gradient(rgba(0, 0, 0, .75) 0%, rgba(102, 0, 0, .50) 100%)";

/* Link das imagens */
const images = [
  'https://www.grammy.com/sites/com/files/styles/news_detail_header/public/news/lindsey_stirling_still_01.jpg?itok=cDdUKxXi',

  'https://upload.wikimedia.org/wikipedia/commons/6/65/Evanescence_at_The_Wiltern_theatre_in_Los_Angeles%2C_California_04_%28cropped%29.jpg',

  'http://images.virgula.com.br/2018/03/63a8d811-2814-4cdf-9c9f-aeb31559854f.jpg'
];

/* Função para alterar as imagens */
(async () => {
    for (let image of images) {

      /* Aplica o gradiente com a URL da imagem */
      document.body.style.setProperty("background-image", `${gradient}, url('${image}')`);
      
      /* Define o tempo de 5 segundos para alternar */
      await new Promise(resolve => setTimeout(resolve, 5000))

    }
})();
body {
  background-size: cover;
}

Com jQuery é a mesma coisa. Para alterar a propriedade basta usar

$("element").css("background-image", `${gradient}, url('${image}')`);
$("element").delay(5000);

Caso você queira uma imagem aleatória apenas (sem alternância), então você pode utilizar Math.random para capturar a imagem randomicamente, por exemeplo:

/* Gradiente padrão */
const gradient = "linear-gradient(rgba(0, 0, 0, .75) 0%, rgba(102, 0, 0, .50) 100%)";

/* Link das imagens */
const images = [
  'https://www.grammy.com/sites/com/files/styles/news_detail_header/public/news/lindsey_stirling_still_01.jpg?itok=cDdUKxXi',

  'https://upload.wikimedia.org/wikipedia/commons/6/65/Evanescence_at_The_Wiltern_theatre_in_Los_Angeles%2C_California_04_%28cropped%29.jpg',

  'http://images.virgula.com.br/2018/03/63a8d811-2814-4cdf-9c9f-aeb31559854f.jpg'
];

const slider = document.querySelector("#slider");

/* Função para capturar e aplicar uma imagem aleatória */
slider.style.setProperty("background-image", `${gradient}, url('${images[ Math.floor(Math.random() * images.length) ]}')`);
img {
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
<img id="slider">


Se você pretende ter uma imagem alternada com animação, segue exemplo:

const slider = document.querySelector("#slider");

const images = slider.querySelector("img");

(async() => {
  for (;;) {

    await new Promise(resolve => setTimeout(resolve, 5000))

    let elementCurrent = slider.querySelector(".active")
    let elementNext;

    if (elementCurrent.nextElementSibling) {
      elementNext = elementCurrent.nextElementSibling;
    } else {
      elementNext = images[0];
    }

    elementCurrent.classList.remove("active")
    elementNext.classList.add("active")
  }
})();
#slider,
#slider .overlay {
  height: 500px;
  position: relative;
  overflow: hidden;
  width: 500px;
}

#slider img {
  opacity: 0;
  transition: all 1s linear;
}

#slider img,
#slider .overlay {
  left: 0;
  position: absolute;
  top: 0
}

#slider .overlay {
  background: linear-gradient(rgba(0, 0, 0, .75) 0%, rgba(102, 0, 0, .50) 100%);
}

#slider img.active {
  opacity: 1
}
<div id="slider">
  <img src="https://picsum.photos/500/500/?image=845" class="active" />
  <img src="https://picsum.photos/500/500/?image=844" />
  <img src="https://picsum.photos/500/500/?image=843" />
  <img src="https://picsum.photos/500/500/?image=842" />
  <img src="https://picsum.photos/500/500/?image=841" />

  <div class="overlay"></div>
</div>

10
  • Usei o background-image, mas ele não tem efeito de animação (w3.org/TR/css-transitions-1/#animatable-properties). Caso deseje isto, é necessário utilizar outro método. Commented 26/04/2018 às 21:35
  • Putz eh isso que preciso ! Mas o meu caso é muito especifico, uso um loader chamado Queryloader, e fiz uma adaptacao onde carrego 2 imagens ao mesmo tempo + o gradiente, #qLoverlay { position: relative; background-image: linear-gradient(rgba(0, 0, 0, .75) 0%, rgba(102, 0, 0, .50) 100%), url("images/honeycomb.jpg"); background-size: cover; height: 100%; width: 100%; top: 100%; left: 100%; } #qLoverlay::after { position: absolute; content: url(images/greetings.png); top: 50%; left: 50%; margin-left: -600px; margin-top: -600px; }
    – user33011
    Commented 26/04/2018 às 21:57
  • Eu precisaria chamar a função em javascript criada onde esta o URL do background-image
    – user33011
    Commented 26/04/2018 às 21:58
  • Eu queria algo do tipo desta função, mas eu não sei como instanciar a variável do script dentro da URL do background-image. <script type="text/javascript"> window.onload = function(){ var imgr = Math.round(Math.random()*4); var imgsrc = [ 'imagem1.jpg', 'imagem2.jpg', 'imagem3.jpg', 'imagem4.jpg', 'imagem5.jpg']; document.getElementById('eximg').src = imgsrc[imgr]; } </script> <img id="eximg"/>
    – user33011
    Commented 26/04/2018 às 22:34
  • Também tenho esse outro script aqui que poderia ser adaptado ... <script language="JavaScript"> window.onload = function() { var randnum = Math.random(); var inum = 5; var rand1 = Math.round(randnum * (inum-1)) + 1; images = new Array images[1] = "imagem1.jpg" images[2] = "imagem2.jpg" images[3] = "imagem3.jpg" images[4] = "imagem4.jpg" images[5] = "imagem5.jpg" var image = images[rand1] document.getElementById('img').src=image; } </script> <img id="img" />
    – user33011
    Commented 26/04/2018 às 22:45
1
<div id="qLoverlay" class="preloader"></div>

<script type="text/javascript">
    /* Gradiente padrão */
    const gradient = "linear-gradient(rgba(0, 0, 0, .75) 0%, rgba(102, 0, 0, .50) 100%)";

    /* Link das imagens */
    const images = [
      'images/building.jpg', 
      'images/honeycomb.jpg',
      'images/space.jpg'];

    const slider = document.querySelector("#qLoverlay");

    /* Função para capturar e aplicar uma imagem aleatória */
    slider.style.setProperty("background-image", `${gradient}, url('${images[ Math.floor(Math.random() * images.length) ]}')`);
</script> 


<style type="text/css">

    /* ATENÇÃO = PSEUDO-ELEMENTOS - Exige o "::" */
    #qLoverlay {
        position: relative;            
        background-size: cover;
        height: 100vh;
        width: 100vw;
    }

    #qLoverlay::after {
        position: absolute;
        content: url(images/logo.png);
        top: 50%;
        left: 50%;
        margin-left: -600px;
        margin-top: -600px; 
    }
</style>

Aqui o importante é na div onde é apresentada a imagem de fundo para o meu caso, o QueryLoader2, basta colocar um #ID, depois eh só apontar o const slider=document.querySelector("#qLoverlay") e por ultimo ajustar a classe / ID #qLoverlay no style CSS.

2
  • 1
    Muito obrigado aos amigo @hugocsl pela dica do css !
    – user33011
    Commented 27/04/2018 às 15:02
  • Obrigado também ao amigo @Valdeir Psr que disponibizou o script JS e a forma como fazer o random das imagens ! Valeu !!!!!
    – user33011
    Commented 27/04/2018 às 15:03

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