$(document).ready(), window.onload, body onload="myfunc();"
최고관리자
7년전
신고
블로그를 운영할 때 스크롤 상황에 따라 함께 움직이는 광고를 구현하기 위해서 <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(); }); 줄여서 위처럼 쓴다고도 하는데 일반적으로 의미를 명확히 구분을 위해 줄여쓰지 않는편이라고 하네요. |