A-frame png sequences texture animation preloader?

Question

I've accomplished my goal using PNG sequence for texture animation on <a-plane> to create 2d animation with ARJS according to answer on this question Animating a series of PNG images in a-frame / AR.JS.

But there was a new problem with image loading...

Those PNG sequences consist of at least 50 frames(files) per component and there's 8 of them. When I tried with Wi-Fi, it went well on image loading (All frames are displaying). But when I tried with Mobile Network, some frames of some objects didn't load and it will not load again.

I tried using preload function (https://stackoverflow.com/a/63060050/1784870) to append <img> to body and load texture into global array for each object, but the problem is still the same, so I ditched this solution as it won't work.

Here's the code for each component (other 7 components are the same code with different component/src name)

AFRAME.registerComponent("anim1", {
        init: function () {
            // load the .pngs
            let loader = new THREE.TextureLoader();
            this.pngArray = [];
            let anim1_frames = 51; // total frames
            for (var i = 0; i < anim1_frames; i++) {
                if (i < 10) {
                    i = '0' + i; // add 0 in front of single digit frames
                }
                this.pngArray.push(loader.load('anim1/anim1' + i + '.png')); // push TextureLoader loaded with img to array
            };

            let mesh = this.el.getObject3D("mesh");
            this.material = mesh.material;
            var i = 0;
            this.id = setInterval(e => {
                if (i >= this.pngArray.length) i = 0;
                this.material.map = this.pngArray[i++];
                this.material.needsUpdate = true;
            }, 1000 / 25); // play at 25fps
        },
        remove: function () {
            clearInterval(this.id);
            // free the memory
            for (let i = 0; i < this.pngArray.length; i++) {
                this.pngArray[i].dispose();
            }
        }
    })

What I need right now is to improve images preloading to display all frames with mobile network.

Thank you in advance