JavaScript에서 load 이벤트는 웹 페이지나 이미지, 스크립트 파일 등의 리소스가 완전히 로드되었을 때 발생하는 이벤트입니다. 이 이벤트는 해당 리소스가 모두 로드되었을 때 특정 동작을 수행하거나 처리할 수 있는 기회를 제공합니다.

일반적으로 load 이벤트는 다음과 같은 상황에서 사용됩니다.

1. 웹 페이지의 로드 완료

웹 페이지의 모든 리소스(HTML, CSS, JavaScript, 이미지 등)가 다운로드되고 브라우저에 렌더링된 후에 load 이벤트가 발생합니다. 이 이벤트를 사용하면 웹 페이지가 완전히 로드된 후에 추가적인 작업을 수행할 수 있습니다.

window.addEventListener('load', () => {
	// 웹 페이지 로드 완료 후 실행될 코드
})

2. 이미지 로드 완료

웹 페이지에서 이미지를 사용하는 경우, 해당 이미지의 로드가 완료되면 load 이벤트가 발생합니다. 이를 활용하여 이미지가 로드된 후에 추가 동작을 수행하거나 이미지의 크기를 계산하는 등의 작업을 수행할 수 있습니다.

const image = document.querySelector('img');
image.src = 'image.jpg';
image.addEventListener('load', () => {
	// 이미지 로드 완료 후 실행될 코드
});

3. 외부 스크립트 로드 완료

웹 페이지에서 외부 스크립트를 로드하는 경우, 스크립트 파일의 다운로드 및 실행이 완료되면 load 이벤트가 발생합니다. 이를 사용하여 스크립트가 준비된 후에 해당 스크립트에 대한 초기화 작업을 수행할 수 있습니다.

const scr = document.createElement('script');
scr.src = 'script.js';
scr.addEventListener('load', () => {
	// 스크립트 로드 완료 후 실행될 코드
});
document.body.appendChild(scr);

*load 이벤트는 비동기적으로 발생하기 때문에 이벤트 핸들러는 해당 리소스의 로드가 완료된 이후에 실행됩니다. 따라서 load 이벤트를 사용하여 로드된 리소스에 대한 작업을 처리할 수 있습니다.*