페이지로드 후 실행되는 JavaScript

https://stackoverflow.com/questions/807878

03-07-2019
|

문제

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

이제 스크립트가 실행 된 이후 ~ 전에 페이지가로드되었고 액세스 할 수 없습니다 <body>, 다른 것들 사이. 문서가 "로드"된 후 일부 JavaScript를 실행하고 싶습니다 (HTML 완전히 다운로드 및 인쇄). 내 스크립트가 실행될 때 연결할 수있는 이벤트가 있습니까? 페이지로드에서 트리거됩니다.

해결책

이 솔루션은 다음과 같습니다.

<body onload="script();">

또는

document.onload = function ...

또는

window.onload = function ...

주목하십시오 마지막 옵션은 더 나은 방법입니다 그이기 때문에 눈에 잘 띄지 않습니다 그리고입니다 더 표준으로 간주됩니다.

다른 팁

합리적으로 휴대하기 쉬운 비 프레임 워크 스크립트를로드 시간에 실행하도록 함수를 설정하는 방법입니다.

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 비동기식을 돌립니다 그리고 스타일 시트의 로딩을 최적화하십시오

"짐"

매우 다른 이벤트, 짐, a를 감지하는 데만 사용해야합니다 완전히로드 된 페이지. DomContentLoaded가 훨씬 더 적절한 곳에서로드를 사용하는 것은 매우 인기있는 실수이므로 신중해야합니다.

모든 것이로드되고 구문 분석 된 후에 :

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

몸 안에 "온부하"속성을 넣을 수 있습니다.

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

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

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

or 

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

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

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

스크립트가 <head> 문서의 경우 사용 가능합니다. defer 스크립트 태그의 속성.

예시:

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

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

연기

이 부울 속성은 브라우저에 문서가 구문 분석 된 후에는 스크립트가 실행되지만 DomContentLoaded를 발사하기 전에 실행해야한다는 것을 나타내도록 설정됩니다.

이 속성은 SRC 속성이없는 경우 (예 : 인라인 스크립트의 경우) 사용하지 않아야합니다.이 경우에는 영향을 미치지 않습니다.

동적으로 삽입 된 스크립트에 대해 유사한 효과를 얻으려면 대신 Async = false를 사용하십시오. 연기 속성이있는 스크립트는 문서에 나타나는 순서로 실행됩니다.

다음은 페이지가로드 된 후 지연된 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>

어디에 배치합니까?

직전에 HTML에 코드를 붙여 넣으십시오 </body> 태그 (HTML 파일의 하단 근처).

그것은 무엇을합니까?

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

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

나는 이것을 기준으로 썼다 JavaScript의 연기 로딩 Pagespeed Google 개념 과이 기사에서도 소스를 소지하십시오 로드 JavaScript를 연기합니다

훅킹을보세요 document.onload 또는 jQuery에서 $(document).load(...).

document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

이봐: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx

Google에서 권장하는 최상의 방법. :)

<script type="text/javascript">
  function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.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>

http://www.feedthebot.com/pagespeed/defer-loading-javaScript.html

작동하는 바이올린

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
   alert("Page is loaded");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>    
</html>

jQuery를 사용하는 경우

$(function() {...});

동일합니다

$(document).ready(function () { })

보다 jQuery $ function ()는 어떤 이벤트를 발사합니까?

<body onload="myFunction()">

이 코드는 잘 작동합니다.

하지만 window.onload 방법에는 다양한 종속성이 있습니다. 따라서 항상 작동하지 않을 수 있습니다.

때로는 시간 창에 의해 모든 요소가로드 된 것은 아니며,로드가 발생하는 것은 때때로 더 복잡한 페이지에서 찾을 수 있습니다. 이 경우 기능을 지연시키기 전에 설정 타임 아웃을 추가하는 것이 순간입니다. 우아하지는 않지만 잘 렌더링하는 간단한 해킹입니다.

window.onload = function(){ doSomethingCool(); };

...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };

그냥 정의하십시오 <body onload="aFunction()"> 페이지가로드 된 후에 호출됩니다. 스크립트의 코드는 동봉 한 것 이상입니다 aFunction() { }.

$ (window) .on ( "load", function () {...});

.준비가 된() 나를 위해 가장 잘 작동합니다.

$(document).ready(function(){ ... });

.짐() 작동하지만 페이지가로드 될 때까지 기다리지 않습니다.

jQuery(window).load(function () { ... });

나에게 효과가없고 다음 인라인 스크립트를 깨뜨립니다. 또한 다른 jQuery 포크와 함께 jQuery 3.2.1을 사용하고 있습니다.

오버레이로드 웹 사이트를 숨기려면 다음을 사용합니다.

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>

사용 유비 도서관 (나는 그것을 좋아한다) : :

YAHOO.util.Event.onDOMReady(function(){
    //your code
});

휴대하고 아름다운! 그러나 다른 물건에 Yui를 사용하지 않으면 (문서 참조) 사용해야 할 가치가 없다고 말합니다.

NB :이 코드를 사용하려면 2 개의 스크립트를 가져와야합니다.

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>

방법에 대한 아주 좋은 문서가 있습니다 문서가로드되었는지 감지하십시오 JavaScript 또는 jQuery 사용.

기본 JavaScript를 사용하여이를 달성 할 수 있습니다

if (document.readyState === "complete") {
 init();
 }

이것은 또한 간격 내에서 수행 할 수 있습니다

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

예 : 모질라

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

jQuery를 사용하여 DOM이 준비된 경우에만 확인합니다

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

모든 자원이로드되어 있는지 확인하려면 Window.load 사용

 $( window ).load(function() {
        console.log( "window loaded" );
    });

jQuery 라이브러리와 함께이 코드를 사용하면 완벽하게 잘 작동합니다.

$(window).bind("load", function() { 

  // your javascript event

});

Daniel이 말했듯이 Document.onload를 사용할 수 있습니다.

다양한 JavaScript 프레임 워크 hwoever (jQuery, mootools 등)는 사용자 정의 이벤트 'domready'를 사용합니다. 이는 더 효과적이어야합니다. JavaScript로 개발 중이라면 프레임 워크 악용을 적극 권장하며 생산성을 크게 증가시킵니다.

나의 조언 사용 asnyc 페이지로드 후 외부 스크립트를로드하는 데 도움이되는 스크립트 태그의 속성

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>

자체 실행 onload 기능을 사용하십시오

window.onload = function (){
    /* statements */
}();

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow