[javascript] 페이지로드 후 JavaScript를 실행하는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

<script>inside를 사용하여 외부 스크립트를 실행하고 있습니다 <head>.

이제 페이지가로드 되기 전에 스크립트가 실행 되기 때문에 <body>무엇보다도에 액세스 할 수 없습니다 . 문서가 “로드”(HTML 완전히 다운로드 및 RAM 내) 된 후 일부 JavaScript를 실행하고 싶습니다. 스크립트가 실행될 때 연결되어 페이지로드시 트리거되는 이벤트가 있습니까?

답변

이러한 솔루션은 다음과 같이 작동합니다.

<body onload="script();">

또는

document.onload = function ...

또는

window.onload = function ...

참고 것을 마지막 옵션은 갈 수있는 더 좋은 방법 이 있기 때문에 unobstrusive 하고 더 표준으로 간주 .

답변

로드 타임에 스크립트가 실행되도록 기능을 설정하는 합리적인 프레임 워크가 아닌 프레임 워크 방식 :

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

답변

페이지를로드하는 단계가 두 개 이상입니다. Btw, 이것은 순수한 JavaScript입니다

“DOMContentLoaded”

이 이벤트는 스타일 시트, 이미지 및 서브 프레임이로드를 완료 할 때까지 기다리지 않고 초기 HTML 문서가 완전히로드되고 구문 분석 될 때 시작됩니다. 이 단계에서는 사용자 장치 또는 대역폭 속도에 따라 이미지 및 CSS 로딩을 프로그래밍 방식으로 최적화 할 수 있습니다.

DOM이로드 된 후 실행 (img 및 css 이전) : 

document.addEventListener("DOMContentLoaded", function(){
    //....
});

참고 : 동기 JavaScript는 DOM 구문 분석을 일시 중지합니다. 사용자가 페이지를 요청한 후 DOM을 가능한 빨리 구문 분석하려면 JavaScript를 비동기로 설정 하고 스타일 시트로드를 최적화 하십시오.

“하중”

매우 다른 이벤트 인 load 는 완전히로드 된 페이지 를 감지하는 데만 사용해야 합니다 . DOMContentLoaded가 훨씬 더 적합 할 때 load를 사용하는 것은 매우 인기있는 실수이므로 조심하십시오.

모든 것이로드되고 파싱 된 후에 실행됩니다 : 

window.addEventListener("load", function(){
    // ....
});

MDN 자료 :

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
https://developer.mozilla.org/en-US/docs/Web/Events/load

모든 이벤트의 MDN 목록 :

https://developer.mozilla.org/en-US/docs/Web/Events

답변

본문에 “onload”속성을 넣을 수 있습니다

...<body onload="myFunction()">...

또는 jQuery를 사용하는 경우 할 수 있습니다 

$(document).ready(function(){ /*code here*/ })

or

$(window).load(function(){ /*code here*/ })

나는 그것이 당신의 질문에 대답하기를 바랍니다.

$ (window) .load는 문서가 페이지에 렌더링 된 후에 실행됩니다.

답변

스크립트가 <head>문서 내에로드 된 경우 defer스크립트 태그 의 속성을 사용할 수 있습니다 .

예:

<script src="demo_defer.js" defer></script>

에서 https://developer.mozilla.org :

연기하다

이 부울 속성은 문서가 구문 분석 된 후 DOMContentLoaded를 실행하기 전에 스크립트가 실행됨을 브라우저에 표시하도록 설정됩니다.

src 속성이없는 경우 (즉, 인라인 스크립트의 경우)이 속성을 사용하면 안됩니다.이 경우에는 효과가 없습니다.

동적으로 삽입 된 스크립트에 대해 비슷한 효과를 얻으려면 async = false를 대신 사용하십시오. defer 속성을 가진 스크립트는 문서에 나타나는 순서대로 실행됩니다.

답변

다음은 페이지가로드 된 후 지연된 js로드를 기반으로하는 스크립트입니다.

<script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "deferredfunctions.js";
      document.body.appendChild(element);
  }

  if (window.addEventListener)
      window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
      window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

이것을 어디에 두어야합니까?

</body>HTML 파일의 맨 아래 근처에있는 태그 바로 앞에 HTML에 코드를 붙여 넣습니다 .

무엇을합니까?

이 코드는 전체 문서가로드 될 때까지 기다렸다가 외부 파일을로드한다고 말합니다 deferredfunctions.js.

위 코드의 예는 다음과 같습니다. JS의 렌더링 지연

나는 자바 스크립트 pagespeed 구글 개념의 지연 로딩을 기반으로 이것을 작성 했으며이 기사에서 제공했습니다.

답변

후킹 document.onload이나 jQuery를 살펴보십시오 $(document).load(...).