Upload images at the same time

Question

I want to make an animation assembled from several gifs uploaded to a web page.

So, I will put gif on top of another to do this. For this to work, gifs will need to be loaded at the same time. How to do this in web programming?

Answer 1

My fiddle https://jsfiddle.net/baz3ynt1/9/ is the answer using javascript to asynchronously load the image, but then adding them to the DOM at the same time to start the animation synchronously. I do not think that you can force the browser to finish loading the image at a certain time, since the browser cannot know how long it will take to load the resource.

Each GIF is loaded using

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

and the function handleLoading()fires the function startAnimation()as soon as all Gifs fire their event 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();
    }
};

Then the function startAnimation()adds the previously created elements img(stored in the array) as children on <div id="animation">, but in order to make them work at the same time, the attribute srcgets reset and set it 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];
    }
};

Firefox IE 11 ( src - , IE 11).

---

: , IE , , reset 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

gifs

CSS Spriting.

, 4 100x100 GIF ( PNG), GIF 200x200 , 100x100 , 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>

Hide result