[jQuery] $(document).ready()와 $(window).load() 차이 알아보기

코드 리뷰에서 vue 소스를 보다가 화면 로딩에 대한 주제가 나왔었다.

가장 기본적인 부분이지만 정리하고 넘어가면 좋을 것 같다는 생각이 들었다.

 

jQuery 할 때 가장 많이 보이는 $(document).ready()는 정확히 뭘까?

 

$(document).ready(function() {
    // code
});

 

.ready() 함수에 대한 공식 홈페이지의 설명이다.

 

Specify a function to execute when the DOM is fully loaded.

 

The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate.

 

요약하자면 .ready()는 DOM이 로드되었을 때 동작할 함수를 지정할 수 있다고 한다.

익명 함수 function을 통해서 DOM이 로드되었을 때 자바스크립트 코드를 실행한다.

 

$(function() {
  // code
});

 

위 코드가 $(document).ready() 보다 권장되는 호출 방법이라고 한다.

하지만 실무에서는 아직도 $(document).ready() 방법이 많이 보이는 것 같다.

 

아무래도 회사마다 정해진 코드 규칙이 있을 것이고

한가지를 고집하기보단 맞춰가는 편이 좋을 것 같다.

 

---

$(window).load()에 대해서도 알아봐야겠다.

 

$(window).load(function() {
    // code
});

 

.load() 함수에 대한 공식 홈페이지의 설명이다.

 

Bind an event handler to the "load" JavaScript event.

 

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

 

요약하자면 지정한 요소 및 그 하위 요소들이 모두 로드된 이후에 함수를 실행한다고 한다.

위의 .load() 코드는 image 등을 포함하여 페이지가 모두 로드된 후에 실행되는 것이다.

 

하지만 .load(handler) 방식은 jQuery 3.0에서 제거되었다고 한다.

아래 코드처럼 .on("load", handler)로 사용하라고 설명되어있다.

 

$(window).on("load", function() {
    // code
});

 

 

* 일반 자바스크립트 환경에서 같은 기능을 하는 window.onload도 존재한다.

 

window.onload = function () {
   // code
}

 

---

$(document).ready와 $(window).load()에 대해서 간단히 알아봤다.

 

$(document).ready()는 DOM이 로드된 후 실행된다.

$(window).load()는 image와 css 등 모든 요소들이 로드된 후 실행된다.

 

둘의 특징을 정리해보면 실행 시점의 차이가 있다.

 

웹페이지는 DOM이 먼저 생성된 후 image, css와 같은 요소들을 불러온다.

그러므로 $(document).ready()가 더 빠르게 실행되는 것을 알 수 있다.

 

ready() load()

 

$(window).load(function() {
    console.log("$(window).load() 1");
});

$(window).load(function() {
    console.log("$(window).load() 2");
});

$(window).on("load", function() {
    console.log("$(window).on('load') 3");
});

$(document).ready(function() {
    console.log("$(doucment).ready() 1");
});

$(document).ready(function() {
    console.log("$(doucment).ready() 2");
});

$(function() {
    console.log("$(function) 3");
});

 

간단한 예제로 ready와 load의 차이를 알 수 있었다.

 

load의 단점은 대용량 이미지나 CSS 파일이 있을 때 모든 요소를 불러온 후에 실행되므로

페이지 로딩에 오랜 시간이 걸릴 수 있다.

 

* window.onload의 단점은 여러 스크립트에서 중복 실행이 안되고, body 요소 안에 onload가 있을 시에 실행이 안된다.

 

$(function() {
   $("img").on("load", function() {
        // code
   });
   // ...
});

 

위의 코드로 오늘 내용을 정리해볼 수 있을 것 같다.

앞으로 jQuery 소스를 작성할 때는 $(function(){}) 함수로 빠른 페이지 로딩과 스크립트 처리를 하고

로딩 이후에 동작이 필요한 부분은 on('load')로 처리하면 깔끔하겠다.

 

단순하지만 헷갈리는 ready와 load에 대해 정리해봤다.