$(document).ready(), window.onload, body onload="myfunc();"

최고관리자 6년전 신고 
블로그를 운영할 때 스크롤 상황에 따라 함께 움직이는 광고를 구현하기 위해서 <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();
});

줄여서 위처럼 쓴다고도 하는데 일반적으로 의미를 명확히 구분을 위해 줄여쓰지 않는편이라고 하네요.

모바일 버전으로 보기