CODEWITHSUNDEEP
htmlcss
Julien Fadel
Julien Fadel

Reputation: 73

Load images at the same time

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?

Upvotes: 4

Views: 1990

Answers (2)

Simon Hänisch
Simon Hänisch

Reputation: 4968

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

Upvotes: 2

Rounin
Rounin

Reputation: 29493

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>

Upvotes: 2

Related Questions