페이지로드 완료 후 기능 실행 window.onload = function () {

페이지로드 후 일부 문을 실행하기 위해 다음 코드를 사용하고 있습니다.

 <script type="text/javascript">
    window.onload = function () { 

        newInvite();
        document.ag.src="b.jpg";
    }
</script>

그러나이 코드는 제대로 작동하지 않습니다. 이 함수는 일부 이미지 또는 요소가로드되는 경우에도 호출됩니다. 내가 원하는 것은 페이지가 완전히로드되는 함수를 호출하는 것입니다.

답변

이것은 당신을 위해 일할 수 있습니다 :

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

또는 jquery에 익숙하다면

$(document).ready(function(){
// your code
});

$(document).ready()DOMContentLoaded에서 발생하지만이 이벤트는 브라우저간에 일관되게 발생하지 않습니다. 이것이 jQuery가 모든 브라우저를 지원하기 위해 무거운 해결 방법을 구현하는 이유입니다. 그리고 이것은 일반 자바 스크립트를 사용하여 동작을 “정확하게”시뮬레이션하는 것을 매우 어렵게 만듭니다 (물론 불가능하지는 않습니다).

Jeffrey Sweeney와 J Torres가 제안했듯이 setTimeout다음과 같은 기능을 실행하기 전에 기능 을 갖는 것이 더 낫다고 생각 합니다.

setTimeout(function(){
 //your code here
}, 3000);

답변

자바 스크립트

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

jQuery와 동일합니다.

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});

참고 : -아래 마크 업을 사용하지 마십시오 (다른 동일한 종류의 선언을 덮어 쓰기 때문에).

document.onreadystatechange = ...

답변

jQuery를 사용할 수 있다면 load를 살펴보십시오 . 그런 다음 요소로드가 완료된 후 실행되도록 함수를 설정할 수 있습니다.

예를 들어, 간단한 이미지가있는 페이지를 고려하십시오.

<img src="book.png" alt="Book" id="book" />

이벤트 핸들러는 이미지에 바인딩 될 수 있습니다.

$('#book').load(function() {
  // Handler for .load() called.
});

현재 창에서 모든 요소를로드해야하는 경우 다음을 사용할 수 있습니다. 

$(window).load(function () {
  // run code
});

답변

페이지로드 완료, “DOM로드”또는 “콘텐츠로드”가 의미하는 바가 약간 혼란 스럽습니까? HTML에서 페이지로드는 두 가지 유형의 이벤트 후에 이벤트를 시작할 수 있습니다.

  1. DOM로드 :로드 된 전체 DOM 트리의 시작부터 끝까지 보장합니다. 그러나 참조 콘텐츠를로드하지 마십시오. img태그로 이미지를 추가 했다고 가정하면 이 이벤트는 모든 img이미지 가 로드되었지만 이미지가 제대로로드되지 않았는지 확인합니다. 이 이벤트를 얻으려면 다음과 같이 작성해야합니다.

    document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

    또는 jQuery 사용 : 

    $(document).ready(function(){
// your code
});

  2. DOM 및 콘텐츠로드 후 : DOM 및 콘텐츠로드도 나타냅니다. img태그 뿐만 아니라 모든 이미지 또는 기타 관련 콘텐츠도로드되도록합니다. 이 이벤트를 얻으려면 다음과 같이 작성해야합니다.

    window.addEventListener('load', function() {...})

    또는 jQuery 사용 :

    $(window).on('load', function() {
 console.log('All assets are loaded')
})

답변

HTML 페이지에서 js 함수를 호출하려면 onload 이벤트를 사용하십시오. onload 이벤트는 사용자 에이전트가 FRAMESET 내의 창 또는 모든 프레임로드를 완료 할 때 발생합니다. 이 속성은 BODY 및 FRAMESET 요소와 함께 사용할 수 있습니다.

<body onload="callFunction();">
....
</body>

답변

이렇게하면 페이지가 이미로드되었는지 여부에 관계없이 두 경우를 모두 처리 할 수 ​​있습니다.

document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}

답변

또는 아래에서 시도해 볼 수 있습니다.

$(window).bind("load", function() { 
// code here });

이것은 모든 경우에 작동합니다. 전체 페이지가로드 된 경우에만 트리거됩니다.