6

Boa noite pessoal, estou com um pequeno desafio aqui e até agora não consegui a sulução, se alguem puder me ajudar seria muito grato:

Estou tentando colocar 2 gifs alocados no mesmo lugar da página, da seguinte forma:

loop{

1- página carrega

2- carregar gif1

3- delay 6000ms

4- remove gif1

5- carregar gif2

6- delay 6000ms

7- remove gif2

}

Dessa forma em loop eterno.

Consegui colocar os 2 banners para sumir e aparecer, o problema é que sumindo (fade out), o gif continua mudando os frames, então quando ele volta (fade in), ele está no meio de algum frame, e aí fica fora de sincronia...

Pesquisei aqui e parece que eu teria que remover o atributo src da tag img, mas não sei como colocar isso na minha função...

Segue meu código:

$( window ).load(function() {
    var $elem = $('#bannertoppage .bannerp'), l = $elem.length, i = 0;
    function go() {
        $elem.eq(i % l).fadeIn(100, function() {
            $elem.eq(i % l).fadeOut(100, function(){
                go();
            });
            i++;
        }).delay(6200)
    }
    go();
});

Desde já obrigado!


(resolvido) Para quem precisar, aqui o código final:

html:

<div class="gif-wrapper">
  <div id="0" class="gif-container">
    <img class="gif-change" src="https://upload-assets.vice.com/files/2015/12/31/1451587321dj.gif">
  </div>
  <div id="1" class="gif-container">
    <img class="gif-change" src=''>
  </div>
</div>

Jquery:

var gifs = [{src:'http://seusite.com.br/seugif1.gif', delay: 6000}, {src: 'http://seusite.com.br/seugif2.gif', delay: 6000}];
var totalGifs = gifs.length;
var gifShow = 0;

$('.gif-wrapper .gif-container:gt(0)').hide();
setTimeout(change_gif, gifs[gifShow].delay, gifShow);
function change_gif(gifShow) {
  $('.gif-wrapper .gif-container').hide();
  gifShow++;
  if(gifShow == totalGifs) gifShow = 0;
  $('.gif-wrapper #' +gifShow+ ' img.gif-change').prop('src', gifs[gifShow].src+ '?'+ new Date().getTime());
  setTimeout(change_gif, gifs[gifShow].delay, gifShow);
  $('.gif-wrapper #' +gifShow).show();
}

E o jsfiddle do @Miguel https://jsfiddle.net/7e6kkL2a/5/

ABÇ!

3
  • 1
    Esta outra questão também pode te ajudar: pt.stackoverflow.com/q/6457/73 (você pode construir um spritesheet só com os dois gifs ou simplesmente trocar o spritesheet caso tenha 2 deles). 15/07/2016 às 10:29
  • @LuizVieira, parece-me até duplicada pois as respostas lá mostram como resolver este problema também.
    – Sergio
    15/07/2016 às 12:17
  • 3
    @Sergio Eu considerei brevemente essa possibilidade, mas concluí que não é duplicada porque esta pergunta efetivamente trata da troca de um "objeto" por outro (assim o fato de ser um gif não importaria tanto, e uma resposta aqui, quando focada nesse aspecto, poderia ajudar outras pessoas com necessidades similares). 15/07/2016 às 12:50

1 Resposta 1

4

Se percebi bem é isto que quer, o gif é completamente retirado e reposto assim começa sempre no primeiro frame de cada um, só tem de ajustar onde está 1000 (delay) para 6000, deixei assim para se perceber melhor, mais rápido. O que faço aqui é alterar mesmo a src da imagem:

// inserir todos gifs que quiser no array, o resto é automatico
var gifs = ['https://upload-assets.vice.com/files/2015/12/31/1451587321dj.gif', 'http://67.media.tumblr.com/3477cac5f71987b0775c219e2925f41a/tumblr_o9pxbm6ACi1r9mp00o1_500.gif'];
var totalGifs = gifs.length;
var gifShow = 0;

var changeTimer = setInterval(function() {
  gifShow++;
  if(gifShow == totalGifs) gifShow = 0; // se o gif a aparecer for == a num total de gifs este volta a 0
  $('.gif-change').prop('src', gifs[gifShow]); // alterar gif, mudamos a src da img
}, 1000); // Ajustar delay aqui
div {
  width: 200px;
}
img {
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <!-- Aqui para carregar instantaneamente coloque o primeiro gif do array gifs na src -->
  <img class="gif-change" src='https://upload-assets.vice.com/files/2015/12/31/1451587321dj.gif'>
</div>

EXEMPLO no jsfiddle, este já com o delay 6000:

Um exemplo um bocado mais completo, aqui tem a possibilidade de escolher o delay para cada um, visto que existem gifs com loops mais longos que outros:

function change_gif(gifShow) {
  gifShow++;
  if(gifShow == totalGifs) gifShow = 0;
  $('.gif-change').prop('src', gifs[gifShow].src);
  setTimeout(change_gif, gifs[gifShow].delay, gifShow);
}

var gifs = [{src:'https://upload-assets.vice.com/files/2015/12/31/1451587321dj.gif', delay: 700}, {src: 'http://67.media.tumblr.com/134abb1904030694a97b6a74ce8fc88d/tumblr_o8axd3ylRR1qk4ealo1_1280.gif', delay: 3500}];
var totalGifs = gifs.length;
var gifShow = 0;

setTimeout(change_gif, gifs[gifShow].delay, gifShow);
div {
  width: 200px;
}
img {
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <img class="gif-change" src='https://upload-assets.vice.com/files/2015/12/31/1451587321dj.gif'>
</div>

EXEMPLO no jsfiddle

10
  • Obrigado pela atenção amigo! Vou testar aqui e lhe informo o resultado 15/07/2016 às 15:45
  • Ok @HugoDeveza. Diga se alguma das soluções resulta sff. Obgado
    – Miguel
    15/07/2016 às 15:47
  • Ok, o meu problema é o seguinte, estou usando códigos do analytics para enviar cliques e impressions (tag <a> com tracking de clique e tag <img> com track de view) para cada gif... Um bloco diferente para cada gif, sendo assim, ao invés de somente modificar o atributo 'src', eu preciso inserir uma div inteira. 15/07/2016 às 16:19
  • 1
    @HugoDeveza feito aqui. jsfiddle.net/7e6kkL2a/5 . Repare no prop, para fazer reload do gif (recomeçar) faça assim. Neste caso certefique-se que cada imagem (gif) está dentro de uma div .gif-container cujo o id corresponde ao index que o gif tem no array gifs
    – Miguel
    15/07/2016 às 16:54
  • 1
    Tente assim: jsfiddle.net/7e6kkL2a/6 . Desta maneira pode especificar o tempo que cada gif fica visivel. Como estamos a fazer reload dos gifs, dependemos da velocidade do servidor, mas assim consegue ser mais especifico
    – Miguel
    15/07/2016 às 18:31

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 .