javascript - 在 Internet Explorer 中加载内容后重新启动 gif

Question

我使用此代码在其他内容之后加载 gif，在 gif 加载后播放 css 关键帧动画，并在 css 动画开始时重置 gif。

$(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; 
    }
});

但它在 IE 11 中不起作用 - gif 没有重新启动...我不知道为什么。在 chrome 和 ff 中运行良好。

Im using it here

Answer 1

我不确定我是否理解您的问题，但您可以尝试预加载 gif，并在它准备好后才将其插入 DOM。

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

另一种方法您可能会尝试删除图像元素，然后重新插入

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

还有 gif 也有可能保存在缓存中，因此当您再次调用它时不会重新加载。为了避免这种情况，您可以添加一个冗余的随机属性并将其附加到图像 url 上。

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

'?' 之后出现的所有内容不应影响实际图像，但会确保重新加载图像而不是从缓存中加载图像。

最后的建议:

尝试替换图片中的src url

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