Javascript&JQuery - 자동 실행 함수

Dodegee·2021년 11월 28일

Javascript&JQuery

목록 보기

1/7

자동 실행 함수 (window.onload, $(document).ready())

window.onload 함수는 웹페이지의 로딩이 끝나는 시점에 실행되는 함수다

window.onload = function () { alert("로딩 완료"); }

와 같이 사용하게 되면 페이지 로드가 끝난 후에 "로딩 완료" 라는 얼럿창이 뜨게 된다

하지만 onload에는 몇가지 단점이 있는데, 이 함수는 페이지 안의 이미지나 외부 파일이 로드 될때까지도 기다린 후에 사용되기 때문에 엔드유저 입장에서 불필요하게 로딩시간이 길어지게 된다. 더욱 심각한것은 동일한 페이지 내에서 onload 함수는 하나만 존재해야 한다는 것인데, 만약 외부 라이브러리에서 onload가 이미 선언 되어 있다면 이를 찾거나 하나로 합치는 것은 여간 어려운일이 아니다.

또한

<body onload="">

와 같은 attribute 가 설정이 되어 있는 경우에는 attribute의 만 작동할뿐 window.onload는 동작 하지 않는다

jquery 에서는 이러한 onload의 단점들을 보완하는 ready() 함수를 제공하는데 위의 코드를 jquery 형식으로 바꾸면 다음과 같이 된다

참고

window.onload와 <body onload="">는 동시에 사용을 할 수 없습니다.

<body onload="">가 실행이 되면 window.onload는 실행이 되지 않는 문제가 있습니다.
 
동시에 사용하려면 window::onload() 이렇게 하면 됩니다.
사용법 : function window::onload(){ 시작시 실행될 내용 }
 
실행 순서는 <body onload="">가 먼저 실행되고, 
이어서 window::onload()가 실행됩니다.

요약

window.onload 와 $(document).ready() 중에 어느 한 쪽이 좋다고 할 수 없다.

window.onload 는 페이지의 모든 요소들이 로드된 이후에 호출되며

$(document).ready() 는 DOM 요소들만 로드되면 호출된다.

window.onload 는 한 페이지에 하나의 함수만 호출 되지만 $(document).ready() 는 모두 호출된다.

위와 같은 특징들을 파악하여 경우에 따라 적절히 골라서 쓰자.

1. window.onload

Javascript에서 페이지가 로드되면 자동으로 실행되는 함수를 구현할 때엔

전역 콜백함수인 window.onload 함수를 사용합니다.

※ 자바스크립트 전역 콜백함수: http://zuyo.tistory.com/337

실행시점 : 페이지가 모두 로드된 시점
특징
1. 페이지의 모든 요소들이 로드되어야 호출된다.
2. 한 페이지에서 하나의 window.onload()함수만 적용된다.
사용법
아래와 같이 익명함수 형태로 사용한다.

window.onload = function () { }

2. $(document).ready()

jQuery는 자바스크립트의 window.onload 함수의 문제점을 해결하기 위해 $(document).ready() 함수를 제공한다.

실행시점 : DOM이 모두 로드된 시점
특징
1. 외부 리소스 및 이미지 로딩과 상관없이 DOM만 로드되면 바로 실행된다.
2. 중복 사용해도 순서대로 모두 실행된다.
사용법

$(document).ready(function(){ }); 
or 생략하면.. $().ready(function(){ }); 
or 더 생략하면.. $(function(){ });

Dodegee

기록하는 개발자

다음 포스트

Javascript&JQuery - 자동 실행 함수