Question

我想用网页中加载的多个gif组合动画。

所以，我会把另外一个gif放在另一个上面。为了使其工作，GIF将需要在同一时间加载。我如何在网络编程中这样做？

Answer 1

GIF需要在同一时间加载

有一种名为 CSS Spriting 的技术。

您不是加载4个100x100像素的GIF（或PNG），而是加载一个200x200像素的GIF，然后在一系列100x100像素的div中，您重新定位 background-image，这样它只显示要显示的200x200像素图像的部分：

.box {
float: left;
width: 100px;
height: 100px;
margin: 6px 12px 6px 0;
background-image: url(http://placehold.it/200x200);
}

.top-left {
background-position: 0 0; 
}

.top-right {
background-position: -100px 0; 
}

.bottom-left {
background-position: 0 -100px; 
}

.bottom-right {
background-position: -100px -100px; 
}

.original {
clear: left;
width: 200px;
height: 200px;
}

<div class="box top-left"></div>
<div class="box top-right"></div>
<div class="box bottom-left"></div>
<div class="box bottom-right"></div>
<div class="box original"></div>

Answer 2

我的小提琴https://jsfiddle.net/baz3ynt1/9/是一个答案，使用javascript异步进行图像加载，然后同时将它们添加到DOM中，以便同步启动动画。我不认为您可以强制浏览器在特定时间完成加载图像，因为浏览器无法知道加载资源需要多长时间。

使用

加载每个Gif

gif = new Image();
gif.src = 'image url';
gif.onload = handleLoading();

并且handleLoading()函数会在所有Gif触发startAnimation()事件后立即触发onload函数：

function handleLoading()
{
    // numLoadedGifs is a counter previously initialized as zero
    // gifUrls is an array of the urls to load
    numLoadedGifs++;
    if (numLoadedGifs === gifUrls.length)
    {
        // now all images are completely loaded
        startAnimation();
    }
};

然后startAnimation()函数将先前创建的img元素（存储在数组中）作为子元素追加到<div id="animation">，但为了使它们同时运行src { {1}}属性重置并重新设置：

function startAnimation()
{
    var animationDiv = document.getElementById('animation');
    for (var index in gifList)
    {
        var img = animationDiv.appendChild(gifList[index]);
        img.classList.add('cloth');
        img.src = '';
        img.src = gifUrls[index];
    }
};

我在Firefox和IE 11中测试过它（重置src是使它在IE 11中运行的原因。）

编辑：显然，IE并不总是足够快，可以附加图像，然后一步重置src，因此https://jsfiddle.net/baz3ynt1/10/会分割两个任务：

function startAnimation()
{
    var animationDiv = document.getElementById('animation');
    for (var index in gifList)
    {
        var img = animationDiv.appendChild(gifList[index]);
        img.classList.add('cloth');
    }
    for (var index in gifUrls)
    {
        gifList[index].src = '';
        gifList[index].src = gifUrls[index];
    }
};

同时加载图像

2 个答案: