JSFiddle - React, Tailwind, and code Playground

by Jeroen Heijmans

HTML

<div data-bind="foreach: people">
  <div>
      <span data-bind="text:firstName"></span>
      <br />
      <img data-bind="attr: {src: imageSrc}" />
  </div>
</div>

CSS

img { 
    max-height: 120px;
}

div div {
    background-color: #CCC;
    border: 1px solid #AAA;
    display: inline-block;
    text-align: center;
    padding: 1em;
    margin: 1em;
    float: left;
}

div:nth-child(3n+1) { clear: both; }

JavaScript

function personViewModel(url) {
    var self = this;
    
    self.firstName = ko.observable("Johndoe");
    self.imageUrl = ko.observable(url);
    self.mayLoad = ko.observable(false);
    
    self.imageSrc = ko.computed(function() {
        return self.mayLoad() ? self.imageUrl() : "http://soulclimbing.mobi/Content/Media/image-loading-animation.gif";
    });
}

function viewModel() {
    var self = this;
    var chunkSize = 3;
    var loadedUpUntilIndex = 0;
    
    self.people = ko.observableArray();
    
    self.loadNext = function() {
        var people = self.people();
        for (var i = 0; loadedUpUntilIndex < people.length && i < chunkSize; i++, loadedUpUntilIndex++) {
            people[loadedUpUntilIndex].mayLoad(true);
        }
        setTimeout(self.loadNext, 5000);
    };
}

var vm = new viewModel();

vm.people.push(new personViewModel("http://i.imgur.com/jkqJn.png"));
vm.people.push(new personViewModel("http://i.imgur.com/JeTYUnx.jpg"));
vm.people.push(new personViewModel("http://i.imgur.com/weyoA.jpg"));
vm.people.push(new personViewModel("http://i.imgur.com/R2BcQ.jpg"));
vm.people.push(new personViewModel("http://i.imgur.com/mlIxB.png"));
vm.people.push(new personViewModel("http://i.imgur.com/C7w6R.jpg"));
vm.people.push(new personViewModel("http://i.imgur.com/c0gAq.jpg"));
vm.people.push(new personViewModel("http://i.imgur.com/9W3p2.jpg"));

vm.loadNext();

ko.applyBindings(vm);