Frame by frame image animation doesn't cache images on load?

JavaScript
1

Hi there,

I’ve recently built a script that is meant to preload a selection of image references and push them into an array, for a function to cycle through every 300ms and display within an HTML element with the ID “animation”. Note that this animation is only meant to run on device widths higher than 991px, ie. tablet and above.

Unfortunately what appears to be happening is the images aren’t being preloaded and instead are being loaded on each frame change, thus causing a big lag as shown below using the Chrome DevTools Network tab.

image

Below is the code that I have so far:

$(window).on('load', function () {
    var window = $(window);
    function checkWindowWidth() {
        var clientWidth = $("body").prop("clientWidth");

        var picPaths = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
        var curPic = -1;
        //preload the images for smooth animation
        var imgO = new Array();
        for (i = 0; i < picPaths.length; i++) {
            imgO[i] = new Image();
            imgO[i].src = picPaths[i];
        }

        function swapImage() {
            curPic = (++curPic > picPaths.length - 1) ? 0 : curPic;
            imgCont.src = imgO[curPic].src;
            setTimeout(swapImage, 300);
        }

        imgCont = document.getElementById('animation');

        // If 975+= (991 - scrollbar), animate background images
        if (clientWidth >= 975) {
            swapImage();
        }
    }

    // Execute on load
    checkWindowWidth();
});

Thanks in advance!

2

Hi there Shoxt3r,

you have your preload within a window onload function,
so it cannot actually preload. :eek:

It needs to be removed from there, and then placed in
the head section of the document to have any chance
of being effective. :winky:

coothead

3

Ah I see, ok thanks!
But why do the images never cache and just get loaded on each frame change - is it all down to the window onload or is there another error in my script?

4

If you have a fixed number of images then you can do that in CSS without any JS.

e.g.

If you are changing the number of images dynamically or regularly then you would need js to do it.

5

Thanks for the suggestion Paul!
However, I want to have the frames change abruptly - I presume you can’t use CSS3 keyframes for this and would have to opt for JS?

6

It depends on what you mean exactly but you can certainly change one image for another instantly using CSS only. The main problem with a css only solution is that you have to hard code the values for the number of images that you use and set up keyframes and timings to match the number of images.

With JS you can automate that process should decide that you want 4 images instead of 3 or if you don’t know the number of images beforehand etc.

CSS would be fine for a known number of static images.

This old codepen does a continuous image swap. It uses background images but a similar technique would work for foreground images.

It all depends on the exact effect you want and how you expect to use it.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.