JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

<button data-bind="click: onclick">Start</button>
<ul data-bind="foreach: images">
    <li><img data-bind="attr: {src: $data}"/></li>
</ul>

JavaScript

var PreCache = (function () {
    function PreCache() {
        this._i = 1;
        this._stop = 10;
        this._img = new Image();

        this._img.onload = function () {
            if (this._i >= this._stop) {
                return;
            }
            this._i++;
            this.fetchImage();
        }.bind(this);

        this.fetchImage = function () {
            this._img.src = 'http://placehold.jp/' + (this._i * 10) + 'x100.png';
        };

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

    return new PreCache();
})();

function ViewModel() {
    this.onclick = function () {
        this.images([]);            
        
        PreCache.start();
        var _images = [];
        for (var i = 1; i <= PreCache._stop; i++) {
            _images.push('http://placehold.jp/' + (i * 10) + 'x100.png')
        }
        
        this.images(_images);
    };
    
    this.images = ko.observableArray([]);
}

ko.applyBindings(new ViewModel());