Restart gif after content loaded in internet explorer

Question

I'm using this code to load gif after other content, play css keyframe animation after gif loaded and reset gif at css animation start.

$(window).load(function() {
    var img = document.createElement("img");
    imageUrl = "deszcz_dl.gif?"+ new Date().getTime();
    img.src = imageUrl;
    var doneTheStuff;
    var func=function(){
        if (!doneTheStuff) {
            doneTheStuff = true;
            console.log("hi");
            img.src = " ";
            img.src = imageUrl;
        }
        $("body").removeClass("preload");
        $("#layer1").removeClass("loading");
    }
    $('#layer1').html("<img class='deszczimg' src="+ img.src + " alt=''>");
    if(img.complete){ 
        func.call(img);
    }
    else{ 
        img.onload=func; 
    }
});

But its not working in IE 11 - gif isn't restarting... i don't know why. Working well in chrome and ff.

Im using it here

Michael Seltenreich · Accepted Answer · 2016-01-05T14:18:02.503

1

I'm not sure I understand your question, but you can try to preload the gif, and only insert it to the DOM once it's ready.

var loader = new Image()
loader.src = '' //path to gif
loader.onload = function () {
//use gif once it's ready
$('#layer1').replaceWith(loader)
}

Another method you might try is to remove the image element, and reinsert it

$('#layer1 img').remove()
$('#layer1').append("<img src='" + pathToImage + '>")

There's also a possibility that the gif is kept in the cache and therefore would not reload again when you call it again. In order to avoid that you can add a redundant random attribute and tack it on to the image url.

$('#layer1').append("<img src='" + pathToImage + '?' + Math.random()>")

Everything that appears after the '?' should not affect the actual image, but would insure the image is reloaded instead of being loaded from the cache.

Final suggestion:

Try to replace the src url in the image

 $('#layer1 img').attr('src', pathToImage);

edited Jan 05 '16 at 14:18

answered Jan 05 '16 at 13:22

Michael Seltenreich

3,013
2
29
55

I need to restart gif. after load gif is hidden I'm showing it in the correct moment, but it should be restarted this img.src = " "; img.src = imageUrl; working for chrom your second method works for chrome too but they dont work for IE11 (gif is not restarted - only last frame is visible) – p0mian Jan 05 '16 at 13:57
I'm adding a third option. Check my revised answer in 1 minute – Michael Seltenreich Jan 05 '16 at 14:01
tryed this $('#layer1 img').remove() $('#layer1').append("") working for chrome, but not for IE – p0mian Jan 05 '16 at 14:01
but i need to restart gif without of reloading it. Reload takes too long. I added random string to reload it at page refresh. But I need to restart already loaded gif to perfectly sync it with other animation. It works for chrome but not for ie11 – p0mian Jan 05 '16 at 14:08
you don't actually have to reload it if you'll use a combination of my first suggested method with the cache fix. Preload it using an object. And reuse it by injecting it into the DOM, but when you inject it, add ?somethingRandom at the end to prevent the cache from firing. – Michael Seltenreich Jan 05 '16 at 14:14
If that doesn't work, I found a similar post that might help you http://stackoverflow.com/questions/19831319/restart-a-gif-animation-without-reloading-the-file – Michael Seltenreich Jan 05 '16 at 14:15
Check my "final suggestion". If that doesn't work I give up :) – Michael Seltenreich Jan 05 '16 at 14:23
1

I think combination of method 1,2, and little bit of 3 worked. Thanks! – p0mian Jan 05 '16 at 16:24

Restart gif after content loaded in internet explorer

1 Answers1