DoCow
  1. DoCow
  3. Reinicie um GIF animado do JavaScript sem recarregar a imagem

Reinicie um GIF animado do JavaScript sem recarregar a imagem

Estou criando um slideshow de animações usando GIFs animados. Eu estou crossfading de uma animação para a próxima. O problema é: a única maneira que descobri para garantir que o GIF comece a animação a partir do primeiro quadro é recarregá-lo toda vez que ele é mostrado. Os GIFs têm 200KB ou mais, o que é muito mais largura de banda para uma apresentação de slides contínua.

Aqui está o meu código atual. img e nextimg são tags

contendo um único cada. nextimg_img é a tag correspondente à próxima imagem a ser exibida. 

 var tmp = nextimg_img.attr('src'); nextimg_img.attr('src', ''); setTimeout(function() { nextimg_img.attr('src', tmp); }, 0); img.fadeOut('slow'); nextimg.fadeIn('slow');

A ideia é que ele defina o atributo src da próxima imagem para '' , em seguida, defina-o de volta para a origem do GIF a ser exibido.

Isso funciona – ele reinicia a animação desde o início – mas os GIFs parecem ser redownloaded toda vez que são exibidos.

EDIT: é um slideshow de loop, e eu estou tentando evitar recarregar os GIFs da rede quando eles são mostrados o segundo / terceiro / subseqüente tempo.

Você deve pré-carregar suas imagens no código. 

 var image = new Image(); image.src = "path";

quando você quiser usar: 

 nextimg_img.attr('src', image.src);

Então, quando você trocar o src, simplesmente troque os objects de imagem pré-carregados. Isso deve fazer o truque para evitar baixar novamente. 

 // reset a gif in javascript img.src = "your_image_url.gif"+"?a="+Math.random();

Tada!

Por favor, note que o GIF será baixado a cada vez, então mantenha um pequeno arquivo.

Eu apenas resolvi isso. Coloque este código (ou outra imagem estática, se quiser) na primeira página:

Em seguida, substitua-o pelo seguinte código quando estiver pronto para reproduzi-lo:

Ele vai jogar desde o início do gif.

O único problema é que você não pode usar o URL do gif, mas apenas sua base64.

Intereting Posts