자바스크립트를 사용하여 이미지의 로딩을 지연시키려면 lazy 속성을 활용할 수 있습니다. 아래는 img 요소에 lazy 속성을 사용하는 예제입니다.

<img src="image.jpg" loading="lazy" alt="Example Image">

이 방법을 사용하면 페이지가 처음 로드될 때 미디어 파일이 함께 로딩되지 않고, 사용자가 스크롤하여 해당 미디어 파일이 화면에 나타나는 순간에 비로드됩니다. 이를 통해 초기 페이지 로딩 시간을 단축하고 사용자의 대역폭을 절약할 수 있습니다.

비디오와 오디오 파일의 경우도 유사한 방법으로 늦은 로딩을 설정할 수 있습니다. 이러한 기술을 활용하여 사용자 경험을 향상시키고 웹 페이지 성능을 최적화할 수 있습니다.

더 자세한 내용은 아래의 MDN 웹 문서를 참고하시기 바랍니다. MDN Web Docs - Loading lazy images