jQuery-ready 및 load

1491 단어

//ready가 DOM 로드가 완료되었을 때 실행하는 코드
$(document).ready(function(){
    //       ...
})

//간략하게
$(function(){
    //        $    ...
})

 
//load 페이지 로드 완료 후 코드 실행
$(document).load(function(){
    //         ...
})

 
차이점1:ready가load보다 먼저 실행됨
브라우저가 페이지를 로드하는 과정 이해
1. HTML 구조를 해석하고 html 문서를 불러오기
2. 외부 테이블 파일을 불러오고 css 스타일과javascript 스크립트를 포함하며 실행
3、html 실행 완료
4, 그림, 글꼴 등 외부 파일 불러오기
5. 페이지 로드 완료
 
ready:DOM 요소 불러오기가 완료되면 실행됩니다. 즉, 위의 3단계에서 실행이 완료되면 실행됩니다. 그림, 글꼴 등 외부 파일의 불러오기를 기다리지 않아도 됩니다.
load: 페이지 불러오기가 완료된 후에야 실행되며, 위 단계 5가 완료된 후에야 실행됩니다.
그래서 브라우저의 페이지 불러오는 절차에 따라ready는load보다 먼저 실행됩니다
 
차이점2:load는 하나만 작성할 수 있고,ready는 여러 개를 작성할 수 있습니다
load 작성:
$(document).load(function(){
    alert("load1...");
});
$(document).load(function(){
    alert("load2...");
});

실행 후 load2만 출력...
그는 단지 하나만 실행할 수 있기 때문에, 만약 여러 가지 상황이 있다면, 뒤의 것은 앞의 것을 덮어쓸 것이다
 
ready 작성:
$(document).ready(function(){
    alert("ready1...");
});
$(document).ready(function(){
    alert("ready2...");
});

실행 후 두 번 모두 출력: ready 1...
          ready2...
 
차이3:ready는 약자가 있지만load는 없다
ready 약자:
$(function(){
    // ready  ,     
})

좋은 웹페이지 즐겨찾기