2 gifs alternating the same space (frames loading correctly)

Question

Good evening guys, I’m having a little challenge here and so far I haven’t managed to get the groove, if anyone can help me I would be very grateful:

I am trying to put 2 gifs allocated in the same place of the page, as follows:

loop{

1-page load

2-load gif1

3- delay 6000ms

4-remove gif1

5- loading gif2

6- delay 6000ms

7-remove gif2

}

Thus in eternal loop.

I managed to put the 2 banners to disappear and appear, the problem is that disappearing (fade out), the gif keeps changing the frames, so when it comes back (fade in), it is in the middle of some frame, and then it is out of sync...

I searched here and it seems that I would have to remove the src attribute from the img tag, but I don’t know how to put this in my function...

Follows my code:

$( 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();
});

Thanks in advance!

---

(solved) For those who need it, here is the final code:

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();
}

And @Miguel jsfiddle https://jsfiddle.net/7e6kkL2a/5/

ABÇ!

Answer 1

If I understand correctly this is what you want, the gif is completely removed and replaced so it always starts in the first frame of each, just have to adjust where it is 1000 (delay) for 6000, left so to understand better, faster. What I do here is to change even the image src:

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

EXAMPLE jsfiddle, this already with delay 6000:

A bit more complete example, here you have the possibility to choose the delay for each one, since there are gifs with longer loops than others:

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>

EXAMPLE in jsfiddle