Load images at the same time - html

Question

I want to do an animation assembled from multiple gifs loaded in a web page.
So, I will put a gif on top of another to make that.
In order for that to work the gifs will need to load at the exact same time.
How do I do this in web programming?

Answer 1

My fiddle https://jsfiddle.net/baz3ynt1/9/ is an answer using javascript to do the image loading asynchronously, but then adding them to the DOM at the same time in order to start their animation synchronously. I don't think you can force the browser to finish loading an image at a certain time, as the browser can't know how long it will take to load a resource.
Each Gif gets loaded using
gif = new Image();
gif.src = 'image url';
gif.onload = handleLoading();
and the handleLoading() function triggers a startAnimation() function as soon as all Gifs triggered their onload event:
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();
}
};
Then the startAnimation() function appends the previously created img elements (stored in an array) as children onto a <div id="animation">, but in order to make them run at the same time their src attribute gets reset and set again:
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];
}
};
I tested it in Firefox and IE 11 (resetting the src is what makes it work in IE 11).
Edit: Apparently IE isn't always fast enough to append the images and then reset their src's in one step, so https://jsfiddle.net/baz3ynt1/10/ splits the two tasks:
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

the gifs will need to load at the exact same time
There is a technique called CSS Spriting.
Instead of loading 4 100x100 pixel GIFs (or PNGs), you load a single 200x200 pixel GIF and then in a series of 100x100 pixel divs, you reposition the background-image, so that it shows only the part of the 200x200 pixel image that you want to display:
.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>