Preloader, wait for multiple images to load

by Sascha

HTML

<div class="spinner-wrapper">
  <div class="spinner-inner">
    Loading images, please wait.
  </div>
</div>

<div class="image-container">


  <img src="http://www.tc-design.co.uk/spinnertest/images/5.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/5.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/1.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/2.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/3.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/4.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/5.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/6.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/7.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/8.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/9.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/1.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/5.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/5.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/6.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/5.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/7.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/5.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/8.jpeg" width="300" height="168">
  <img src="http://www.tc-design.co.uk/spinnertest/images/5.jpeg" width="300" height="168">
</div>

CSS

body {
  font-family: "Open Sans", sans-serif;
  
}
.spinner-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.spinner-inner {
  background: white;
  margin: 100px auto;
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.7);
}

JavaScript

//Preloader
preloaderFadeOutTime = 500;
let $images = $('.image-container img');
let cImages = $images.length;
let cComplete = 0;

$images.each(function (k, v) {
    v.src = v.src;
});


$images.on('load', function() {
  cComplete++;
  if (cComplete === cImages) {
    $('.spinner-wrapper').fadeOut(preloaderFadeOutTime);
  }
  
});