同时加载图像

Question

我想要做一个从网页中加载的多个GIF组装成的动画。

所以，我会把gif放在另一个之上来做到这一点。 为了实现这个功能，gif需要在同一时间加载。 我如何在网络编程中做到这一点？

Answer 1

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

每个的Gif被使用

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

和handleLoading()功能加载了触发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属性被重新设置，并重新设置：

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

Answer 2

的GIF将需要在精确的同时

有一个叫拼合CSS技术加载。

相反装载4周100×100像素的GIF（或PNG），加载一个200x200像素的GIF，然后在一系列的100×100像素的div，你重新定位的background-image，以便它显示只把部分的所需的200×200像素的图片显示：

.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>