자바스크립트에서 지연 로딩은 특정 시간이나 이벤트가 발생할 때까지 로딩을 지연시키는 기술입니다. 이 기술은 사용자 경험을 향상시키고 페이지 성능을 최적화하는 데 도움이 됩니다.

setTimeout을 사용한 시간 기반 지연 로딩

일정 시간 이후에 특정 작업을 수행하려면 setTimeout 함수를 사용할 수 있습니다.

setTimeout(function() {
  // 여기에 실행하고자 하는 작업을 넣습니다.
}, 1000); // 1000 밀리초(1초) 후에 작업을 실행합니다.

위의 예제에서 setTimeout 함수는 1초 후에 지정된 작업을 실행합니다.

이벤트 기반 지연 로딩

특정 이벤트가 발생할 때까지 로딩을 지연시키는 방법에는 이벤트 리스너를 활용하는 방법이 있습니다. 예를 들어, 특정 버튼이 클릭되었을 때 작업을 실행하고자 하는 경우에는 다음과 같이 할 수 있습니다.

document.getElementById('myButton').addEventListener('click', function() {
  // 여기에 실행하고자 하는 작업을 넣습니다.
});

위의 예제에서는 myButton이라는 ID를 가진 요소가 클릭되었을 때, 지정된 작업을 실행합니다.

결론

자바스크립트에서의 지연 로딩은 setTimeout을 이용한 시간 기반 지연과 이벤트 기반 지연을 통해 구현할 수 있습니다. 이를 통해 웹 페이지의 로딩을 최적화하고 사용자 경험을 향상시킬 수 있습니다.

참고 문헌:

• MDN Web Docs - WindowTimers.setTimeout()
• MDN Web Docs - EventTarget.addEventListener()