이 블로그는 JavaScript에서 window.onload와 document.onload의 차이점을 보여줍니다.
JavaScript의 window.onload와 document.onload
“ 창.온로드 ” 이벤트는 전체 페이지(해당 리소스 포함)의 로드가 완료되면 시작됩니다. 즉, 이 이벤트를 사용하여 페이지 콘텐츠에 의존하는 코드를 실행하기 전에 페이지가 완전히 로드되었는지 확인할 수 있습니다.
“ 문서.온로드 ” 이벤트는 window.onload와 유사하지만 문서의 DOM(페이지 콘텐츠 구조)이 로드를 완료한 경우에만 발생합니다. 이는 이 이벤트를 사용하여 코드를 실행하기 전에 페이지의 콘텐츠가 완전히 로드되고 조작할 준비가 되었는지 확인할 수 있음을 의미합니다.
따라야 할 가장 좋은 접근 방식은 무엇입니까?
일반적으로 코드를 실행하기 전에 페이지의 콘텐츠가 완전히 로드되었는지 확인하기만 하면 되는 경우 window.onload 대신 document.onload를 사용하는 것이 좋습니다. 이는 document.onload가 window.onload보다 빠르게 실행되어 코드의 성능을 향상시킬 수 있기 때문입니다. 그러나 코드를 실행하기 전에 페이지의 리소스(예: 이미지 및 스타일시트)가 완전히 로드되었는지 확인해야 하는 경우 대신 window.onload를 사용해야 합니다.
JavaScript에서 window.onload와 document.onload를 사용하는 방법은 무엇입니까?
주어진 예에서 이러한 이벤트가 코드를 실행하기 전에 문서 로드 및 창 로드를 식별하는 방법을 볼 수 있습니다.
을 부르다 ' 문서.온로드 ” alert() 메시지를 사용하여 문서가 로드되었음을 알리는 이벤트:
문서. 길 위에 = 알리다 ( 'document_onload' ) ;을 부르다 ' 창.온로드 ” 이벤트를 호출하고 alert() 메서드의 결과 메시지를 이벤트에 할당합니다.
창문. 길 위에 = 알리다 ( 'window_onload' ) ;
보시다시피 페이지가 새로고침되면 첫 번째 문서가 로드되고 전체 페이지 로드가 완료되면 window onload 메서드가 호출됩니다.
이것이 JavaScript의 window.onload 및 document.onload 이벤트에 관한 전부입니다.
결론
“ 창.온로드 ' 그리고 ' 문서.온로드 ”는 코드를 실행하기 전에 전체 페이지가 로드되는지 확인하는 두 개의 JavaScript 이벤트입니다. document.onload는 window.onload보다 빠르게 실행되므로 코드의 성능을 향상시킬 수 있습니다. 이 블로그는 JavaScript에서 window.onload와 document.onload의 차이점을 보여주었습니다.