728x90
반응형
자바스크립트 - 페이지 로딩시 함수 호출
1. body 태그에 onload<body onload = "함수">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>body onload</title>
<script>
function onload() {
alert("onload 호출 성공");
}
</script>
</head>
<body onload="onload()">
</body>
</html>
2. window onload window.onload = 함수;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>window onload</title>
<script>
function windowonload() {
alert("windowonload 호출 성공");
}
window.onload = windowonload;
</script>
</head>
<body>
</body>
</html>
💡 onload 와 ready의 차이점
window.onload 같은 경우는 전체 페이지에 모든 외부 리소스나 이미지가 전부 불러와진 이후에 작동을 하게 된다.
해당 외부 리소스나 이미지의 양이 커 딜레이가 생길 때에는 그만큼의 시간을 기다렸다가 작동을 하게 되는 문제가 있다.
또한 외부 링크나 파일을 include했을 때 그 안에 window.onload가 중복되어 존재하게 된다면 둘 중 하나만 적용되는 큰 문제와 위 예제와 같이 body에서 사용하는 onload를 사용하게 된다면 모든 window.onload가 작동하지 않는 현상이 일어난다.
📌 이러한 문제를 해결하기 위해 jQuery 에서는 $(document).ready() 함수를 제공한다.
$(document)ready()의 경우 외부 리소스 및 이미지와는 상관없이 DOM데이터만 로드가 완료되면 바로 실행이 되는 함수이다.
따라서 window.onload보다 더 빠르게 실행이 된다.
또한 중복해서 사용을 해도 그 순서대로 모두 실행이 된다.
728x90
반응형
'Programming > JavaScript' 카테고리의 다른 글
| [JS / jQuery] for문 유형 forEach, for...of 사용법 및 예제 (0) | 2021.05.14 |
|---|---|
| [JS / jQuery] 비교 연산자 == , === 차이점 (0) | 2021.05.12 |
| [JS / jQuery] 자바스크립트 onclick 이벤트 사용법 & 예제 (0) | 2021.05.03 |
| [JS / jQuery] 자바스크립트 change 이벤트 사용법 & 예제 (데이터 가져오기) (1) | 2021.04.30 |
| [JS / jQuery] Ajax beforeSend - Ajax 통신 직전에 jqXHR 객체 수정하여 전송하기 (0) | 2021.04.29 |
