同时加载多张图片

Question

我想制作一个由多个在网页中加载的gif图像组装而成的动画。

因此，我将把一个gif放在另一个gif上面来实现这个效果。 为了使它正常工作，gif必须同时加载。 在Web编程中如何实现这一点？

- Julien Fadel

---

我创建了这个 fiddle：https://jsfiddle.net/baz3ynt1/5/ 它使用 JavaScript 加载 GIF（你不能强制它们同时加载），然后创建空的 'img' DOM 元素并同时设置它们的 'src' 属性... 我在 Firefox 中尝试过，它可以工作，但在 IE 11 中不行，我不知道原因。现在无法尝试 Chrome。 - Simon Hänisch

Answer 1

这些gif图需要同时加载。

有一种叫做CSS雪碧图的技术。

不是加载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>

- Rounin

---

这是一种不错的技术，可以用于我的任务，但我已经设计了一些无法与此技术配合使用的图像。我有一个人类设计的角色，用户可以为该角色选择任何服装。我要么选择上传用户选择的服装并将其作为图像放在我的服务器上，要么在网页中预加载每件衣服的图像并将它们放在人物上方。我选择了第二种方法，并正在寻找另一种技术。我认为你提供的内容不能解决这个问题。 - Julien Fadel

另一种方法是使用JavaScript检测所有图像已加载并在此时开始动画。 - Rounin

Answer 2

我的示例https://jsfiddle.net/baz3ynt1/9/是使用JavaScript异步加载图像并同时将它们添加到DOM中，以便开始它们的同步动画。我认为您无法强制浏览器在特定时间完成图像加载，因为浏览器无法知道加载资源需要多长时间。

每个GIF都使用以下方式进行加载：

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

而 handleLoading() 函数会在所有 Gif 触发它们的 onload 事件后立即触发 startAnimation() 函数：

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 属性：

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];
    }
};

- Simon Hänisch