javascript - Using knockout to progressively load an array of video metadata -

my page needs display grid of n video previews. browsers can have ~5-6 active connections given domain. prevent "waiting socket connection..." issue, i'm attempting progressively load video metadata.

i have following:

 <!-- ko foreach: videos() -->   <video data-bind="attr: {src: mediapath, preload: $parent.preloadcount() > $index() ? 'metadata' : 'none'}, event: {loadedmetadata: $parent.incrementpreloadcount}"></video>  <!--/ko--> 

within viewmodel:

    vm.preloadcount = ko.observable(4);     vm.incrementpreloadcount = function () {         feedvm.preloadcount(feedvm.preloadcount() + 1);     }; 

the idea being each time video's metadata loaded, loadedmetadata event fires off increment progressively switches none metadata.

the problem videos reevaluating every increment, refetching src each time preloadcount updates.

how can prevent "switched" videos being re-evaluated? resort relatively simple js solution here i'd take advantage of knockout if can.

map supplies second argument function, index of element being operated on. can use stand-in $index in computed returns map of array.

making computed handle preload attribute value should keep video elements being touched except when value of computed changes.

const vm = {    arr: ['one', 'two', 'three', 'four', 'five'],    preloadcount: ko.observable(0)  };    vm.videos = ko.computed(() => vm.arr.map((v, i) => ({    v,    i,    preload: ko.computed(() => vm.preloadcount() > ? 'metadata' : 'none')  })));    ko.applybindings(vm);    setinterval(() => vm.preloadcount(1 + vm.preloadcount()), 1200);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>  <div data-bind="foreach: videos">    <div>      <span data-bind="text: i"></span>      <span data-bind="text: v"></span>      <span data-bind="text: preload"></span>    </div>  </div>