Search code examples
javascriptjqueryhtmlcssanimated-gif

Reste Animated gif on refreshing page

So I recently used this piece of code so the animated gifs can work again after refreshing a page and it's working fine in chrome, safari, internet explorer EXCEPT firefox, I need help please

jQuery:

$(img).css("background-image","url('../images/rt2/728x90_Animated_bg_2x.gif"+"?a="+Math.random()+"')");
Solution

  • It may be do to Bug 129986 - "Cached Gif animations don't reset on reload". You can check out more information here: http://apod.nasa.gov/apod/ap141202.html

    The nasa.gov website seems to have the same issue with firefox at least: http://apod.nasa.gov/apod/ap141202.html

    The gif will work about 4 times and then stops. Refreshing the page (F5) does not fix the problem. However, it will work if you manually refresh the cache (CRTL + F5).

    I tested the below code with firefox and the gif always keeps playing. 

    var img = new Image();
src = '../images/rt2/728x90_Animated_bg_2x.gif';
img.src=src;

setInterval(function(){
    t=new Date().getTime();
    $("img").attr("src", src+'?'+t);
},5000);

    Edit:

    I tried the way you had it originally and ran into the same trouble (img was not showing). The below worked for me in Firefox. 

    var img = new Image();
src = '../images/rt2/728x90_Animated_bg_2x.gif' + '?a=' + Math.random();
img.src=src;
$('img').css('background-image',"url("+img.src+")");