JavaScript for preloading images in the background/cache with progress bar

I am trying to get the data-value of the .ldBar.label-center div to update along with the loading progress of the images loaded in the background, within preloadImages.

I guess my goal would be to get the eventListener to update the data-value object live, so that people waiting can follow the progress of the huge pile of images they have to download into cache before entering the content of the page.

this.addEventListener("DOMContentLoaded", preloadImages, true);

var imageArray = new Array("bigImage.jpg");

function preloadImages(e) {
  for (var i = 0; i < imageArray.length; i++) {
    var tempImage = new Image();

    tempImage.addEventListener("load", trackProgress, true);
    tempImage.src = imageArray[i];
  }
}

function trackProgress() {
  loadedImages++;
  if (loadedImages == imageArray.length) {
    imagesLoaded();
  }
}

function imagesLoaded() {
  // do something
}

.ldBar-label {
  color: #ffffff;
  font-family: 'Lato', sans-serif;
  font-size: 5em;
  font-weight: 900;
  -webkit-text-stroke: 3px black;
}

.ldBar path.mainline {
  /* styling of bar omitted */
}

<div class="ldBar label-center" data-value="60" data-type="fill" data-img="media/886679_9d816.gif" data-img-size="400,400" data-fill-background="#9df"></div>