js实现css的animation效果

使用需求:

实现css的animation的帧动画效果，使用css做在ios手机上面会一闪一闪的，
岁就用到了js的写法，之前在网上看了好多种方法，大多数都是把图片地址放
到一个数组里面，然后通过循环来改变图片的地址的方式，这种方式可以看到
页面会一直请求图片，造成死循环

我的解决方案 ：

let imgUrl = './jpg/';
let index = [1,24];
let maxLength = index[1] - indexLength[0] + 1;
//loading
let eleDiv = document.getElementById("box");
let eleLoading = document.getElementById("loading");
const store = {
			length:0
		}
//图片序列预加载
        //帧动画分享开始
        var urlRoot = './jpg/';
        var indexRange = [1, 24];
        var maxLength = indexRange[1] - indexRange[0] + 1;
        // loading
        var eleContainer = document.getElementById('container');
        var eleLoading = document.getElementById('loading');
        // 存储预加载的DOM对象和长度信息
        var store = {
            length: 0
        };
        // 图片序列预加载
        for (var start = indexRange[0]; start <= indexRange[1]; start++) {
            (function(index) {
                var img = new Image();
                img.onload = function() {
                    store.length++;
                    // 存储预加载的图片对象
                    store[index] = this;
                    play();
                };
                img.onerror = function() {
                    store.length++;
                    play();
                };
                img.src = urlRoot + 'anim' + index + '.jpg';
            })(start);
        }

        var play = function() {
            var percent = Math.round(100 * store.length / maxLength);
            if (percent == 100) {
                var index = indexRange[0];
                eleContainer.innerHTML = '';
                var step = function() {
                    if (store[index - 1]) {
                        eleContainer.removeChild(store[index - 1]);
                    }
                    eleContainer.appendChild(store[index]);
                    index++;
                    if (index <= indexRange[1]) {
                        setTimeout(step, 190);
                    } else {
                        index = indexRange[0];
                        step();
                    }
                };
                setTimeout(step, 50);
            }
        };

html代码

            <div id="container" class="container anima">
             <span id="loading" class="loading"> </span>
            </div>

css样式

.anima {
    width: 100%;
    height: 100%;
}
.loading {
    position: absolute;
    width: 7.5rem;
    height: 6.67rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.loading>img {
    width: 100%;
    height: 100%;
}