Html 同时加载图像

我想做一个动画组装从多个GIF加载在一个网页上

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

GIF需要在同一时间加载

有一种叫做CSS Spriting的技术

不加载4个100x100像素GIF（或PNG），而是加载一个200x200像素GIF，然后在一系列100x100像素DIV中，重新定位背景图像，使其仅显示要显示的200x200像素图像的一部分：

.box{
浮动：左；
宽度：100px；
高度：100px；
保证金：6px 12px 6px 0；
背景图片：url(http://placehold.it/200x200);
}
.左上角{
背景位置：0；
}
.右上角{
背景位置：-100px 0；
}
.左下角{
背景位置：0-100px；
}
.右下角{
背景位置：-100px-100px；
}
.原件{
清除：左；
宽度：200px；
高度：200px；
}

My fiddle是一个答案，它使用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

元素（存储在数组中）作为子元素附加到

上，但为了使它们在运行的同时重置并再次设置其

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和IE11中测试了它（重置

src

是它在IE11中工作的原因）

---

编辑：显然IE的速度不够快，无法在一步中附加图像，然后重置图像的

src

，因此将两个任务分开：

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

---

这是一项很好的技术，它可以用于我的任务，但到目前为止，我设计的图像无法使用这种技术。我有一个人设计的，用户可以选择任何衣服，他想为这个人。我可以选择将用户选择的衣服上传到我的服务器上作为图片，或者在网页中预装每件衣服的图片，并将它们放在人体的顶部。我选择了第二种方法，我正在寻找另一种技术。我不认为你提供的东西能做到这一点。另一种方法是使用javascript检测所有图像何时加载，并仅在此时启动动画。我创建了这个提琴：它使用javascript加载GIF（你不能强制它们同时加载），然后创建空的

img

DOM元素，同时设置它们的

src

属性。。。我在Firefox上试过，效果很好，但在IE11上没有，我也不知道为什么。现在无法尝试使用Chrome。