$(document).ready(), window.onload, body onload="myfunc();"
페이지 정보
작성일14.03.29 12:01관련링크
본문
블로그를 운영할 때 스크롤 상황에 따라 함께 움직이는 광고를 구현하기 위해서 <body onload="function();">와 같은 방식을 이용했습니다.
그런데, 이것은 추천하지 않는 방법이라고 하네요.
이유는 onload는 페이지의 모든 리소스가 로드될 때까지 실행이 안된다고 합니다.
실제로 함수에서 호출하는 구성요소 중 하나가 빠져 있을 때 작동이 되지 않고 무한 기다림 상태가 되더군요.
광고 2개를 움직이게 만들다가 1개를 없애면서 함수 내에서 관련 코드를 지우지 않았는데요.
그런데, 지우고 없는 요소를 로딩한다고 함수가 실행이 안되지 뭡니까. ㅎㅎ;
솔직히 제가 필요한 것은 단순히 스크롤에 따라 움직이게 만드는 것이기에 페이지의 전체 구성요소가 로드될 때까지 기다릴 이유가 없거든요.
그렇다보니 비효율적이고 낭비라는 것이죠.
따라서 제 상황에 효과적인 방법을 찾아보았습니다.
바로.. jQuery의 '$(document).ready()'를 이용하는 것이었습니다.
<sc'ript type="text/javascript" src="./jquery-1.11.0.min.js"></sc'ript>
<sc'ript type="text/javascript">
$(document).ready(function(){
myfunc();
});
</sc'ript>
아.. 위에서 'sc'ript'라고 되어 있는데 이건 'script'라고 고쳐야 됩니다.
제대로 표기하니 화면에 안보이네요.
■ jQuery 다운로드 : http://jquery.com/
블로그에서 <body> 태그에 넣었던 onload를 제거하고 위 코드를 <body>와 </body> 사이에 넣어도 아무런 이상없이 정상작동 되네요.
그리고, 이미지나 광고 로딩한다가 버벅대던 부분이 없이 페이지 접속하니깐 금방 스크롤 작동되서 시원시원한 느낌도 들구요.
참고로, jQuery에서 <body onload="myfunc();">처럼 같은 기능을 하는 함수가 있다고 합니다.
window.onload=function(){myfunc();};
이것도 사용해보니 정말 같은 동작을 하네요.
그러나, 이미지와 같은 다른 요소들이 모두 로드될 때까지 기다릴 이유가 없기에 저는 '$(document).ready()'를 적용했습니다.
$(function(){
myfunc();
});
줄여서 위처럼 쓴다고도 하는데 일반적으로 의미를 명확히 구분을 위해 줄여쓰지 않는편이라고 하네요.
그런데, 이것은 추천하지 않는 방법이라고 하네요.
이유는 onload는 페이지의 모든 리소스가 로드될 때까지 실행이 안된다고 합니다.
실제로 함수에서 호출하는 구성요소 중 하나가 빠져 있을 때 작동이 되지 않고 무한 기다림 상태가 되더군요.
광고 2개를 움직이게 만들다가 1개를 없애면서 함수 내에서 관련 코드를 지우지 않았는데요.
그런데, 지우고 없는 요소를 로딩한다고 함수가 실행이 안되지 뭡니까. ㅎㅎ;
솔직히 제가 필요한 것은 단순히 스크롤에 따라 움직이게 만드는 것이기에 페이지의 전체 구성요소가 로드될 때까지 기다릴 이유가 없거든요.
그렇다보니 비효율적이고 낭비라는 것이죠.
따라서 제 상황에 효과적인 방법을 찾아보았습니다.
바로.. jQuery의 '$(document).ready()'를 이용하는 것이었습니다.
<sc'ript type="text/javascript" src="./jquery-1.11.0.min.js"></sc'ript>
<sc'ript type="text/javascript">
$(document).ready(function(){
myfunc();
});
</sc'ript>
아.. 위에서 'sc'ript'라고 되어 있는데 이건 'script'라고 고쳐야 됩니다.
제대로 표기하니 화면에 안보이네요.
■ jQuery 다운로드 : http://jquery.com/
블로그에서 <body> 태그에 넣었던 onload를 제거하고 위 코드를 <body>와 </body> 사이에 넣어도 아무런 이상없이 정상작동 되네요.
그리고, 이미지나 광고 로딩한다가 버벅대던 부분이 없이 페이지 접속하니깐 금방 스크롤 작동되서 시원시원한 느낌도 들구요.
참고로, jQuery에서 <body onload="myfunc();">처럼 같은 기능을 하는 함수가 있다고 합니다.
window.onload=function(){myfunc();};
이것도 사용해보니 정말 같은 동작을 하네요.
그러나, 이미지와 같은 다른 요소들이 모두 로드될 때까지 기다릴 이유가 없기에 저는 '$(document).ready()'를 적용했습니다.
$(function(){
myfunc();
});
줄여서 위처럼 쓴다고도 하는데 일반적으로 의미를 명확히 구분을 위해 줄여쓰지 않는편이라고 하네요.
댓글목록
등록된 댓글이 없습니다.
