index.html

<!DOCTYPE html>
<html>
<head>
	<title>HTML Image Viewer</title>
	<style type="text/css">
		html, body{
			margin: 0;
		}
		input[type=file]{
			margin: .75em;
		}
		.container{
			width: 100vw;
		}
		#images{
			float: left;
			text-align: center;
			width: 66vw;
		}
		#full-image{
			position: fixed;
			top: 0;
			right: 3vw;
			width: 30vw;
			height: 100vh;
		}
		#full-image #image-number{
			position: fixed;
			top: .75em;
			right: 3vw;
			font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
		}
		#images img, #image-preview{
			display: block;
			margin: auto;
			max-width: 100%;
		}
		#image-preview{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
		#image-preview[src]{
			border: 1px solid rgba(50,50,50,.8);			
		}
		#image img:not([src]){
			display: none;
		}
		#dir{
			position: fixed;
			top:0;
			opacity: 0.1;
			width:100vw;
			background: rgba(0,0,0,.2);
			padding:10px;
			margin:0;
		}
		#dir:hover{
			opacity: 1;
		}
		#dir-label{
			position: fixed;
			top:0;
			margin: .75em 0;
			text-align: center;
			z-index: -1000;
			width: 100vw;
		}
	</style>
</head>
<body>
	<label id="dir-label">Click Here to Select a Directory</label>
	<input id="dir" type="file" webkitdirectory>
	<div class="container">
		<div id="images"></div>
		<div id="full-image">
			<img id="image-preview" />
			<div id="image-number">
				<span id="image-current"></span>
				/
				<span id="image-max"></span>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		(function(){
			let files = [];
			let initialImagesLoaded = 8;

			function elementInView(elem){
				let viewTop = window.scrollY;
				let viewBottom = viewTop + window.innerHeight;
				let elemTop = elem.offsetTop;
				let elemBottom = elemTop + elem.offsetHeight;
				return ((elemBottom >= viewTop && elemBottom <= viewBottom) ||
					(elemTop >= viewTop && elemTop <= viewBottom))
			}
			function overHalfOfElementInView(elem){
				let viewTop = window.scrollY;
				let viewBottom = viewTop + window.innerHeight;
				let elemTop = elem.offsetTop;
				let elemBottom = elemTop + elem.offsetHeight;

				let top = viewTop >= elemTop ? viewTop : elemTop;
				let bottom = viewBottom <= elemBottom ? viewBottom : elemBottom;
				return (bottom - top >= (elemBottom - elemTop)/2)
			}
			function viewIsNearBottomOfPage(){
				let body = document.body;
				let html = document.documentElement;
				let pageHeight = Math.max( body.scrollHeight, body.offsetHeight, 
					html.clientHeight, html.scrollHeight, html.offsetHeight );

				let viewTop = window.scrollY;
				let viewHeight = window.innerHeight;
				return pageHeight - viewTop <= viewHeight*3;
			}
			function loadImage(){
				return new Promise((resolve, reject) => {
					if (files.length > 0){
						let file = files.shift();
						let images = document.getElementById('images');
						const fr = new FileReader();
						let img = document.createElement('img');
						
						fr.onload = function(){
							img.src = this.result;
							resolve(this.result);
						}
						fr.readAsDataURL(file);

						images.appendChild(img);
					}
				})
			}
			document.getElementById('dir').onchange = function(){
				let images = document.getElementById('images');
				while (images.children.length > 0){
					images.children[0].remove();
				}
				while (files.length > 0){
					files.pop();
				}
				for (let i = 0; i < this.files.length; i++){
					if (/^image/.test(this.files[i].type)){
						files.push(this.files[i])
					}
				}
				document.getElementById('image-current').innerText = 1;
				document.getElementById('image-max').innerText = files.length;
				for (let i = 0; i < Math.min(initialImagesLoaded, files.length); i++){
					loadImage().then(src => {
						if (i === 0){
							let preview = document.getElementById('image-preview');
							preview.src = src;
							preview.dataset.index = i;
						}
					})
				}
			}

			window.onscroll = function(){
				let images = document.getElementById('images');
				let preview = document.getElementById('image-preview');
				let src = null;
				let imageNumber = null;
				for (let i = 0; i < images.children.length; i++){
					let img = images.children[i];
					if (elementInView(img) && overHalfOfElementInView(img)){
						src = img.src;
						imageNumber = i;
						break;
					}
				}
				if (src && imageNumber != preview.dataset.index){
					preview.src = src;
					preview.dataset.index = imageNumber;
					document.getElementById('image-current').innerText = imageNumber + 1;
				}
				if (viewIsNearBottomOfPage()){
					loadImage();
				}
			}
		})()
	</script>
</body>
</html>