[자바스크립트, 제이쿼리] onload와 (function(){...}, $(document).ready(function){ ... }; 의 차이
jQuery 2015. 6. 30. 23:57
728x90
반응형
요즘 작업을하다가 뭔가 스크립트가 이미지 보다 먼저 읽히는 그런 현상이 발생해서
준비 과정을 바꿔봤다.
일단 이걸 보자.
1 2 3 | $(document).ready(function(){}); $(function(){}); window.onload = function(){}; | cs |
자바스크립트 코딩에 있어 위와 같은 이벤트 핸들러에는
페이지가 로딩 되었을 때 일어나길 바라는 이벤트 들이 작성된다.
1번과 2번은 제이쿼리를 쓴다면 정말 흔하게 많이 쓰인다.
3번 같은 경우엔 DOM레벨 0방식의 자바스크립트 이다.
이 셋의 차이점은 이렇다.
1번과 2번의 경우에는 리소스와 상관없이 DOM만 생성되어도 호출이 된다.
즉. 이미지와 같은 리소스를 요구하는 페이지일 경우 이미지의 로딩 완료와 상관없이 진행된다.
1 2 | $(document).ready(function(){}); $(function(){}); | cs |
그러나 3번 항목의 경우에는 현재 호출 되고 있는 페이지에서 DOM뿐만 아니라 리소스 호출도 완료 되었을 경우에 실행이 된다.
3 | window.onload = function(){}; | cs |
블로그 운영자는 제이쿼리로 width 100% 짜리 슬라이더를 짜다가 이미지가 로드가 완료되기 전에 스크립트가 발동해버려서 이미지가 반토막이 난 경험이 있다.
그럴땐 1,2 번 항목보다는 3번 항목을 이용해 보도록 하자.
반응형
'jQuery' 카테고리의 다른 글
제이쿼리 플러그인 만들기 (0) | 2017.08.28 |
---|---|
.change() 메서드 (0) | 2016.04.24 |
event.target 이벤트가 발생된 요소 찾기 (0) | 2015.05.13 |
길이 값을 구하는 메서드들 width, innerWidth, outerWidth (0) | 2015.05.08 |
.attr() 메서드와 .prop() 메서드 (0) | 2015.05.05 |