2 gifs alternating the same space (frames loading correctly)

Question

2 gifs alternating the same space (frames loading correctly)

Navigation

#1 by (4 votes)

6

Good night everyone, I have a small challenge here and until now I have not been able to get the relief, if anyone could help me, I would be very grateful:

I'm trying to put 2 gifs in the same place on the page, like this:

loop {

1- page loads

2- Load gif1

3-delay 6000ms

4- remove gif1

5- Load gif2

6-delay 6000ms

7- remove gif2

}

That way in an eternal loop.

I managed to put the 2 banners to disappear and appear, the problem is that fade out, the gif keeps changing the frames, so when it fades in, it is in the middle of some frame, and it stays there out of sync ...

I searched here and it looks like I would have to remove the src attribute from the img tag, but I do not know how to put this in my function ...

Follow 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!

(resolved) 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><divid="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 the jigsaw of @Miguel link

ABCD!

jquery

asked by anonymous 15.07.2016 / 04:49

1 answer

how to use the last-child for the penultimate too? Show command executed when error occurs in SQL

score 4 · Accepted Answer

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

// 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><!--Aquiparacarregarinstantaneamentecoloqueoprimeirogifdoarraygifsnasrc--><imgclass="gif-change" src='https://upload-assets.vice.com/files/2015/12/31/1451587321dj.gif'>
</div>

EXAMPLE in jsfiddle, this already with the delay 6000 :

An example of a bit more complete, here is the possibility to choose the delay for each one, since there are gifs with loops longer 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><imgclass="gif-change" src='https://upload-assets.vice.com/files/2015/12/31/1451587321dj.gif'>
</div>

EXAMPLE in jsfiddle