CODEWITHSUNDEEP
javascriptjquery
p0mian
p0mian

Reputation: 81

Restart gif after content loaded in internet explorer

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

Upvotes: 2

Views: 753

Answers (1)

Michael Seltenreich
Michael Seltenreich

Reputation: 3488

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

Upvotes: 1

Related Questions