JavaScript onload (한국어)

요약 :이 자습서에서는 JavaScript의 문서, 이미지 및 스크립트 요소에서 발생하는로드 이벤트를 처리하는 방법을 배웁니다.

창의로드 이벤트

window 개체의 경우 load 이벤트는 JavaScript 파일, CSS 파일 및 이미지와 같은 모든 종속 리소스를 포함하여 전체 웹 페이지 (HTML)가 완전히로드되었습니다.

load 이벤트를 처리하려면 등록해야합니다. addEventListener() 메소드를 사용하는 이벤트 리스너 :

Code language: JavaScript (javascript)

또는 onload<window 객체의 / div> 속성 :

Code language: JavaScript (javascript)

레거시 시스템을 유지하는 경우 load 이벤트 핸들러는 다음과 같이 HTML 문서의 본문 요소에 등록됩니다.

메서드를 사용하여 가능하면 onload 이벤트 핸들러를 할당합니다.

이미지의로드 이벤트

load 이벤트는 이미지에서도 발생합니다. 이미지에 대한 load 이벤트를 처리하려면 이미지 요소의 addEventListener() 메서드를 사용할 수 있습니다.

다음 예제는 load 이벤트 핸들러를 사용하여 DOM 트리에있는 이미지가 완전히로드되었는지 확인합니다.

iv id를 할당 할 수 있습니다. 다음과 같이 <img> 요소의 onload 속성을 직접 사용하는 = “2f04154ede”>

이벤트 핸들러 :

Code language: HTML, XML (xml)

이미지 요소를 동적으로 생성하는 경우 iv id = “c341d7013b를 설정하기 전에 onload 이벤트 핸들러를 할당 할 수 있습니다. “>

속성은 다음과 같습니다.

작동 방식 :

  • 먼저, 문서가 완전히로드 된 후 이미지 요소를 생성합니다. 창로드 이벤트의 이벤트 핸들러입니다.
  • 두 번째로 onload 이벤트 핸들러를 이미지에 할당합니다.
  • 세 번째로 이미지를 추가합니다. 문서에.
  • 마지막으로 src 속성에 이미지 URL을 할당합니다. src 속성이 설정되는 즉시 이미지가 요소에 다운로드됩니다.

스크립트의로드 이벤트

<script> 요소는 또한 표준 방식과 약간 다른 load 이벤트를 지원합니다.

스크립트의 load 이벤트를 사용하면 자바 스크립트 파일이 완전히로드되었는지 확인합니다.

이미지와 달리 웹 브라우저는 src 속성이 할당되고 <script> 요소가 문서에 추가되었습니다.

다음 코드는 페이지가 완료된 후 app.js 파일을로드합니다. 완전히로드되었습니다. onload 이벤트 핸들러를 할당하여 app.js가 완전히로드되었는지 확인합니다.

요약

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다