JavaScript에서 페이지가로드 될 때 스크립트를 한 번 실행하려면 window.onload을 사용해야합니까? 아니면 스크립트를 작성해야합니까? 나는 팝업을 갖고 싶어"window.onload"를 언제 사용합니까?
는 예를 들어, 내가 (직접 <script> 태그 안에) 작성해야 :
alert("hello!");
또는 :
window.onload = function() {
alert("hello!");
}
모두 직후에 실행되는 것처럼 페이지가로드됩니다. 그 차이점은 무엇입니까? 스크립트 요소가 발생했을 때 실행하거나 원하는 경우로드 이벤트가 발생() 이미지 같은 것을 포함하여 전체 문서 (이후로드) 때 실행하려는 경우에 따라
첫 번째 브라우저는 브라우저가 연결되면 실행됩니다.
두 번째 창은 창을 실행하기 전에로드 될 때까지 기다립니다.
일반적으로 두 번째 작업을 수행해야하지만 기능을 정의하는 대신 이벤트 수신기를 연결해야합니다. 예 :
.
어느 쪽도 항상 옳지 않습니다.
그러나 일반적으로 onload에 직접 기능을 할당하지 말고 addEventListener (이전 브라우저를 지원해야하는 경우 호환성 라이브러리가 있음)을 사용하는 것이 좋습니다.
여기는 documentation on MDN입니다. 그것은에 따르면
: 문서로드 프로세스의 끝에
로드 이벤트가 발생합니다. 이 시점에서 문서의 모든 객체가 DOM에 있고 모든 이미지와 하위 프레임의로드가 완료되었습니다.
첫 번째 스 니펫 코드는 브라우저가 HTML에서이 부분을 누르 자마자 실행됩니다.
두 번째 코드 단편은 DOM과 모든 이미지가 완전히로드 될 때 팝업을 트리거합니다 (스펙 참조). alert() 기능을 고려
, 정말 (이 window 목적 이외의 아무것도에 의존하지 않는다)하는 것이 실행을 가리 중요하지 않습니다. 그러나 DOM을 조작하고 싶다면 제대로로드 될 때까지 기다려야합니다.
DOM로드를 기다리는 이유는 스크립트 뒤에로드되는 요소를 대상으로 할 수 있기 때문입니다. alert 만 만들면 문제가되지 않습니다. 그러나 스크립트 후 마크 업에있는 div을 타겟팅했다면 DOM 트리 조각이로드 될 때까지 기다리지 않으면 오류가 발생한다고 가정 해 봅시다.
document.ready는 jQuery를 사용하는 경우 window.onload에 훌륭한 대안이다.
는 여기를 참조하십시오 : window.onload vs $(document).ready()
당신은 세 가지 대안이 :
document.addEventListener("DOMContentLoaded", function(){});은 DOM 준비가 완료되면 실행합니다.
인사이드 window.onload function(){})은 모든 페이지 리소스가로드되는 즉시 실행됩니다.
다른 답변은 모두 오래된 것
우선, 상단에 스크립트를 넣고 window.onload를 사용하여 안티 패턴이다. 인터넷 익스플로러의 날이나 자바 스크립트와 브라우저에 대한 오해가 가장 많았습니다.
당신은 단지 그들이 실수로 head 섹션에 갈 필요가 스크립트를 믿었 기 때문에 사람들이 window.onload을 사용하는 유일한 이유는 당신의 HTML
<html>
<head>
<title>My Page</title>
</head>
<body>
content
</body>
<script src="some-external.js"></script>
<script>
some in page code
</script>
</html>
의 바닥 스크립트를 이동할 수 있습니다. 스크립트가 머리 부분에 있다면 물건이 순서대로 실행되기 때문에 몸과 내용은 의 정의로 아직 존재하지 않으며 순서로 실행됩니다.
해킹 방법은 window.onload을 사용하여 나머지 페이지가로드 될 때까지 기다리는 것입니다. 스크립트를 하단으로 이동하면 해당 문제가 해결되어 몸과 내용이 이미로드되어 있으므로 window.onload을 사용할 필요가 없습니다.
현대적인 해결책은 스크립트에 defer 태그를 사용하는 것이지만 스크립트는 모두 외부에 있어야한다는 점을 사용하는 것입니다.
<head>
<script src="some-external.js" defer></script>
<script src="some-other-external.js" defer></script>
</head>
이 브라우저가 바로 스크립트를 다운로드를 시작합니다 장점을 가지고 있으며 지정된 순서대로 실행됩니다 있지만 페이지가로드 된 후 때까지를 실행하기 위해 대기, window.onload 또는 더 나은에 대한 필요가 없습니다 하지만 여전히 불필요한 window.addEventListener('load', ...
와우,이 질문은 오래되었습니다! '연기'에 대한 팁을 주셔서 감사합니다. 나는 그것을 보았지만 그것이 의미하는 것을 결코 깨닫지 못했습니다. –
음, 글쎄, 그것은 'window.onload'를 사용할 때 가장 먼저 검색 할 때 결과가 업데이트 된 답변이 필요한 것처럼 보입니다. – gman
@xgqfrms [jQuery 항상 대답은 아닙니다] (http://meta.stackoverflow.com/questions/335328/when-is-use-jquery-not-a-valid-answer-to- - 자바 스크립트 - 질문) ... –