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()>")

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

最终建议：

尝试替换图片中的src网址

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

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

1 个答案: