JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

<div id="readyState"></div>
<div id="progress">
</div>

JavaScript

var _readyStateElm = document.getElementById('readyState');
document.addEventListener('readystatechange', function() {
    _readyStateElm.innerHTML = document.readyState;
}, false);

var PreCache = (function () {
    function PreCache() {
        this._progressElm = document.getElementById('progress');
        this._i = 1;
        this._stop = 800;
        this._img = new Image();

        this._img.addEventListener('load', function () {
            if (this._i >= this._stop) {
                console.log('done');
                return;
            }
            this._i++;
            this.fetchImage();
        }.bind(this), false);

        this.fetchImage = function () {
            if (this._i % (this._stop/10) === 0) {
                this._progressElm.innerHTML = Math.floor(this._i / (this._stop/10)) * 10 + '%';
            }
            this._img.src = 'http://placehold.jp/' + (this._i * 10) + 'x100.png';
        };

        this.start = function () {
            console.log('start');
            this._i = 1;
            this.fetchImage();
        };
    }

    return new PreCache();
})();

PreCache.start();