수업 자료 관련 질문이 있습니다.

앗, 제가 파일을 빠뜨렸나봅니다^^;
일단 여기에 올려드릴게요.
다운로드 파일도 업데이트 하도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		body {
			height: 500vh;
		}
		body.before-load {
			overflow-y: hidden;
		}
		.sample-img {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
		}
	</style>
</head>
<body class="before-load">
	<img class="sample-img" src="../video/002/IMG_7027.JPG">

	<script>
		const imgElem = document.querySelector('.sample-img');
		
		let loadedImagesCount = 0;
		let totalImagesCount = 960;
		const videoImages = [];

		let progress;
		let currentFrame;

		function loadImages() {
			for (let i = 0; i < totalImagesCount; i++) {
				let imgElem = new Image();
				imgElem.src = `../video/002/IMG_${7027 + i}.JPG`;
				videoImages.push(imgElem);

				imgElem.addEventListener('load', function () {
					loadedImagesCount++;
					if (loadedImagesCount === totalImagesCount) {
						console.log('이미지 로드 완료');
						init();
					}
				});
			}
		}

		loadImages();

		function init() {
			document.body.classList.remove('before-load');

			window.addEventListener('scroll', function () {
				progress = pageYOffset / (document.body.offsetHeight - window.innerHeight);
				if (progress < 0) progress = 0;
				if (progress > 1) progress = 1;

				requestAnimationFrame(function () {
					currentFrame = Math.round((totalImagesCount - 1) * progress);
					imgElem.src = videoImages[currentFrame].src;
				});
			});
		}
	</script>
</body>
</html>

인프런 커뮤니티 질문&답변