add the spinner (and high resolution image) on click, and remove it when finish loading (load event)
document.querySelector('img.preview').addEventListener('click', function(e) {
var lowRes = e.target.src;
var myOverlay = document.querySelector('.overlay');
var highRes = document.createElement('img');
var mySpinner = document.createElement('img');
myOverlay.style.display = 'block';
highRes.className = 'bgImg';
highRes.src = lowRes.substr(0, lowRes.length-7) + '.jpg';
myOverlay.appendChild(highRes);
mySpinner.className = 'spinner';
mySpinner.src = 'images/spinner.gif';
myOverlay.appendChild(mySpinner);
highRes.addEventListener('load', function() {
mySpinner.parentNode.removeChild(mySpinner);
});
}, false);
body {
background: url(images/background_wood.jpg) repeat;
}
img.preview {
width: 100px;
height: 100px;
display: block;
border-radius: 10px;
margin: 0 auto;
margin-top: 200px;
cursor: pointer;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
/* z-index: 5000; */
}
.overlay img.bgImg {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
.overlay img.spinner {
display: block;
position: absolute;
top: 0;
left: 50%;
margin: 0 auto;
margin-top: 300px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Events</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="preview" src="images/taquitosandcheese_tn.jpg" alt="Taquitos and Cheese">
<div class="overlay"></div>
<script src="script.js"></script>
</body>
</html>