• 회원가입
  • 로그인

[DOM_Event] JS - load 이벤트 (= onload 속성) - 모든 웹문서 로드 완료 (= 로드 이벤트 = 온로드 속성)

목차

  1. load 예제 - 로드 시 경고창 띄우기
  2. load 정의
  3. load 구문
  4. load 예제 - 이미지 로드 완료 시 실행
  5. load 예제 - 로드 시, 쿠키 활성 상태 체크

 

load 예제 - 로드 시 경고창 띄우기

 

<!DOCTYPE html>

<html>

<head>

<script>

function homzzang() {

  alert("Welcome to Homzzang.com");

}

</script>

</head>

<body onload="homzzang()">

    <h1>홈짱닷컴 Homzzang.com</h1>

</body>

</html>


결과보기

 

load 정의

 

객체가 로드되었을 때 실행.

 


 

1.

웹 페이지 내 모든 콘텐츠 (이미지, 스크립트 파일, CSS 파일 등)를 완전히 로드 후 스크립트 실행 위해 <body> 요소 안에서 주로 사용.

 

2.

방문자의 브라우저 유형/버전 확인 후 그 정보를 기반으로 적절한 웹 페이지 버전을 로드하는 데도 사용 가능.

 

3.

쿠키 처리하는데도 사용 가능.

 

4.

모든 브라우저 지원.

 

5.

지원 HTML 태그 요소 : 

<body>, <frame>, <frameset>, <iframe>, <img>, <input type = "image">, <link>, <script> , <style>

 

 

load 구문


[HTML 속성 방식] 

<element onload="script">

 

[JS 속성 방식] 

object.onload = function(){script};


[JS 메서드 방식]
object.addEventListener("load", script);

 


[속성값]

 

script

객체 로드 완료 후, 실행할 내용. 

 

주의: addEventListener() 메서드는 IE8 및 그 이하 버전은 지원 X.

 

load 예제 - 이미지 로드 완료 시 실행

 

<img src="https://source.unsplash.com/random" onload="homzzang()" width="100" height="132">


<script>

function homzzang() {

  alert("이미지 로드 완료");

}

</script>

 

 

load 예제 - 로드 시, 쿠키 활성 상태 체크

 

<!DOCTYPE html>

<html>

<body onload="homzzang()">


<p id="demo"></p>


<script>

function homzzang() {

  var text = "";

  if (navigator.cookieEnabled == true) {

    text = "쿠키 활성화 된 상태 O.";

  } else {

    text = "쿠키 활성화 된 상태 X";

  }

  document.getElementById("demo").innerHTML = text;

}

</script>


</body>

</html> 


결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012