H5序列图片视频化播放

var imglistplay = function (obj) {
    var indexRange = [1, 107];
    var maxLength = indexRange[1] - indexRange[0] + 1;
    // loading
    var eleContainer;
    // var eleLoading = document.getElementById('loading');
    // 存储预加载的DOM对象和长度信息
    var store = {
        length: 0
    };
    var callstart, callend;

    return {
        play: function () {
            // loading进度
            var percent = Math.round(100 * store.length / maxLength);
            // eleLoading.setAttribute('data-percent', percent);
            // eleLoading.style.backgroundSize = percent + '% 100%';
            // 全部加载完毕，无论成功还是失败
            if (percent == 100) {
                callstart && callstart();
                var index = indexRange[0];
                // eleContainer.innerHTML = '';
                // 依次append图片对象
                var step = function () {
                    eleContainer.innerHTML = '';
                    eleContainer.appendChild(store[index]);
                    // 序列增加
                    index++;
                    // 如果超过最大限制
                    if (index <= indexRange[1]) {
                        setTimeout(step, 42);
                    } else {
                        // 本段播放结束回调
                        callend && callend();
                    }
                };
                // 等100%动画结束后执行播放
                setTimeout(step, 100);
            }
        },
        // 图片序列预加载
        load: function () {

            var than = this;
            eleContainer=obj.target;
            callstart = obj.callstart;
            callend = obj.callend;
            indexRange = obj.num;
            maxLength = indexRange[1] - indexRange[0] + 1;
            for (var start = indexRange[0]; start <= indexRange[1]; start++) {
                (function (index) {
                    var img = new Image();
                    img.onload = function () {
                        store.length++;
                        // 存储预加载的图片对象
                        store[index] = this;
                        than.play();
                    };
                    img.onerror = function () {
                        store.length++;
                        than.play();
                    };
                    img.src = obj.url + index + (obj.format||'.png');
                })(start);
            }
        }
    }

}