121

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

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

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

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

javascript html image

— Neeraj Kumar
소스

1

JSFiddle.net에 데모를 추가 할 수 있습니까?

— Some Guy

2

jQuery를 사용할 수 있습니까? 그렇다면, 시도$(window).load()

— 매트 Hintzke

예, 제대로 작동하지 않는 것이 무엇인지 정확히 설명해 주시겠습니까? 오류가 발생하거나 alert창이 다시 그리기 전에 함수를 호출하고 있습니까 (로드 전에 호출 된 것처럼 보이게 함)? 코드는 괜찮아 보이며 사용자가 큰 라이브러리를 다운로드하도록 강요하면이 문제를 해결하거나 진단하기가 더 쉬워지지 않을 것입니다.

— Jeffrey Sweeney

doxdesk.com/img/updates/20091116-so-large.gif

— Jeffrey Sweeney

작동하지 않는다고 말하면 일부 이미지가로드되는 경우에도 기능이 실행된다는 의미입니다.

— Neeraj Kumar

166

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

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);

— Shreedhar
소스

12

jQuery ready는 OP가 요청한 작업을 수행하지 않습니다. ready요소가로드 된 후에가 아니라 DOM이로드 될 때 실행됩니다. load요소가로드 / 렌더링을 마친 후에 실행됩니다.

— Jaime Torres

OP는 HTML뿐만 아니라 모든 요소가 완전히로드되기를 원하는 것처럼 보입니다.

— Jeffrey Sweeney

3

@shreedhar 또는 그는 작업에 적합한 도구를 사용할 수 있습니다 ( load).

— Jaime Torres

14

setTimeout나쁜 생각입니다. 3 초 (또는 선택한 값에 따라 n 초) 미만의 페이지 로딩에 의존 합니다. 로딩 시간이 더 오래 걸리면 작동하지 않고 페이지 로딩 속도가 빨라지면 아무 이유없이 기다려야합니다.

— JJJ

1

@ChristianMatthew its useCapture true 인 경우 useCapture는 사용자가 캡처를 시작하려고 함을 나타냅니다. 캡처를 시작하면 지정된 유형의 모든 이벤트가 등록 된 리스너로 전달 된 후 DOM 트리에서 그 아래에있는 EventTargets로 전달됩니다. 트리를 통해 위로 버블 링되는 이벤트는 캡처를 사용하도록 지정된 리스너를 트리거하지 않습니다. 자세한 설명 은 DOM 레벨 3 이벤트 를 참조하십시오 .

— Shreedhar

52

자바 스크립트

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 = ...

— T. 토 두아
소스

1

이 크로스 브라우저 지원 여부

— bluejayke

이 답변은 다른 답변보다 훨씬 낫습니다. +1

— Xydez

아주 좋아요! 감사.

— Farzin Kanzi

34

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

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

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

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

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

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

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

— 하이메 토레스
소스

1

jQuery load메서드는 Javascript를 사용하여 함수를로드 이벤트에 바인딩 하지 않습니까? 이것은 OP가 이미하고있는 것과 어떻게 다를까요?

— Alex Kalicki

@AlexKalicki AFAIK는 jQuery가 addEventListenerDOM0 onload속성을 바인딩하는 대신 사용할 수 있다는 점을 제외하고는 다르지 않습니다 .

— Alnitak 2012-08-13

@AlexKalicki 똑같은 기능을 사용한다고 말할 수는 없지만 문서에 따르면 jQuery는 이미지를 포함한 모든 요소가 실행되기 전에로드되도록합니다. 나는 이것이 사실이라면 추가 논리가있을 것이라고 믿는 경향이 있으며, OP가보고하는 동일한 문제에 부딪힌 적이 없지만 문서를 믿지 않을 이유가 없습니다.

— Jaime Torres

4

JQuery v1.8부터 .load는 더 이상 사용되지 않습니다. 소스

— 아도니스 K. Kakoulidis

1

질문에 대한 최고의 솔루션입니다.

— Roberto Sepúlveda Bravo

29

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

DOM로드 :로드 된 전체 DOM 트리의 시작부터 끝까지 보장합니다. 그러나 참조 콘텐츠를로드하지 마십시오. img태그로 이미지를 추가 했다고 가정하면 이 이벤트는 모든 img이미지 가 로드되었지만 이미지가 제대로로드되지 않았는지 확인합니다. 이 이벤트를 얻으려면 다음과 같이 작성해야합니다.
```
document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);
```
또는 jQuery 사용 :
```
$(document).ready(function(){
// your code
});
```
DOM 및 콘텐츠로드 후 : DOM 및 콘텐츠로드도 나타냅니다. img태그 뿐만 아니라 모든 이미지 또는 기타 관련 콘텐츠도로드되도록합니다. 이 이벤트를 얻으려면 다음과 같이 작성해야합니다.
```
window.addEventListener('load', function() {...})
```
또는 jQuery 사용 :
```
$(window).on('load', function() {
 console.log('All assets are loaded')
})
```

— Hanif
소스

2

이것은 단지 명확한 설명과 함께 OP에 대한 비의 jQuery 솔루션을 제공하는 여기에 대한 답변입니다

— Velojet

@Hanif DOMContentLoaded이벤트 핸들러는 나를 위해 아무것도하지 않는 것 같지만 load수행합니다.

— Brandon Benefield

1

마지막 두 예제는 줄 끝에 세미콜론이 필요하지 않습니까?

— R. Navega

11

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

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

— 사용자 2361682
소스

7

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

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

— tsveti_iko
소스

3

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

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

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

— 가네쉬 램 라비
소스

3

내가 아는 한 사용하는 것이 가장 좋습니다.

window.addEventListener('load', function() {
    console.log('All assets loaded')
});

DOMContentLoaded이벤트 사용에 대한 # 1 대답은 모든 자산이로드되기 전에 DOM이로드되기 때문에 한 단계 뒤로 물러나는 것입니다.

다른 답변 setTimeout은 클라이언트의 장치 성능과 네트워크 연결 속도에 완전히 주관적이기 때문에 강력히 반대 할 것을 권장 합니다. 누군가가 느린 네트워크에 있거나 CPU가 느린 경우 페이지를로드하는 데 수십 초에서 수십 초가 걸릴 수 있으므로 setTimeout필요한 시간 을 예측할 수 없습니다 .

의 경우 MDN 에 따라 이벤트 이전에 여전히 변경 readystatechange될 때마다 발생 합니다 .readyStateload

완전한

상태는로드 이벤트가 곧 시작됨을 나타냅니다.

— 라이언 워커
소스

2

window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}

— tvrcgo
소스

2

이 코드 조각이 해결책이 될 수 있지만 설명을 포함하면 게시물의 품질을 향상시키는 데 도움이됩니다. 앞으로 독자를 위해 질문에 답하고 있으며, 해당 사용자는 코드 제안 이유를 모를 수 있습니다.

— yivi dec.

@yivi 즉 자동화 된 메시지가 아니라면 : 그것은 .. 코드에 주석이 특히 때문에 어떤 그 코드 수단, 사람에게 아주 명백하다

— bluejayke

1

JS 프레임 워크를 사용하지 않는 경우이 프로젝트는 브라우저 간 호환성을 통해 DOM 준비 상태를 얻는 가장 좋은 방법입니다.

https://github.com/ded/domready/blob/master/ready.js

— 올리비에 레 팔로
소스

1

이미 jQuery를 사용하고 있다면 다음을 시도해 볼 수 있습니다.

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

— 산토스
소스

4

설명 없이는 쓸모가 없습니다.

— Daniel W.

1

내가 찾은 가장 좋은 대답은 </body>명령 바로 뒤에 "드라이버"스크립트를 넣는 것 입니다. 위의 일부 솔루션보다 가장 쉽고 아마도 더 보편적입니다.

계획 : 내 페이지에는 테이블이 있습니다. 표가있는 페이지를 브라우저에 작성한 다음 JS로 정렬합니다. 사용자는 열 머리글을 클릭하여 다시 지정할 수 있습니다.

테이블이 종료 </tbody>되고 본문이 종료 된 후 다음 행을 사용하여 정렬 JS를 호출하여 열 3별로 테이블을 정렬합니다. 정렬 스크립트를 웹에서 가져 왔으므로 여기에서 재현되지 않습니다. 적어도 내년에는에서 JS를 포함한 작동중인 것을 볼 수 있습니다 static29.ILikeTheInternet.com. 페이지 하단의 "여기"를 클릭하십시오. 그러면 테이블과 스크립트가있는 다른 페이지가 나타납니다. 데이터를 입력 한 다음 빠르게 정렬하는 것을 볼 수 있습니다. 속도를 좀 높여야하는데 이제 기본이 있습니다.

</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

메이커 미키

— Micheal Morrow
소스

0

이 jQuery를 시도하십시오 .

$(function() {
 // Handler for .ready() called.
});

— djserva
소스

1

jQuery ready는 OP가 요청한 작업을 수행하지 않습니다. ready요소가로드 된 후에가 아니라 DOM이로드 될 때 실행됩니다. load요소가로드 / 렌더링을 마친 후에 실행됩니다.

— Jaime Torres

0

전체 페이지로드 설정 시간 초과 후 함수 호출

setTimeout(function() {
   var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
	for(var i, j = 0; i = ddl2.options[j]; j++) {
		if(i.text == val) {      
			ddl2.selectedIndex = i.index;
			break;
		}
	} 
}, 1000);

스 니펫 확장

— MH
소스

0

다음 패턴을 사용하여 문서가로드를 완료하는지 확인하는 경향이 있습니다. 이 함수는 문서가로드를 완료하면 해결 되는 Promise (IE를 지원해야하는 경우 polyfill 포함 )를 반환 합니다. setInterval유사한 구현 setTimeout이 매우 깊은 스택을 생성 할 수 있기 때문에 아래를 사용합니다 .

function getDocReadyPromise()
{
  function promiseDocReady(resolve)
  {
    function checkDocReady()
    {
      if (document.readyState === "complete")
      {
        clearInterval(intervalDocReady);
        resolve();
      }
    }
    var intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

물론 IE를 지원할 필요가 없다면 :

const getDocReadyPromise = () =>
{
  const promiseDocReady = (resolve) =>
  {
    const checkDocReady = () =>
      ((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
    let intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

이 기능으로 다음을 수행 할 수 있습니다.

getDocReadyPromise().then(whatIveBeenWaitingToDo);

— 폴 로우
소스

-1

저에게 맞는 웹 구성 요소를 사용하고 있습니다.

document.addEventListener('WebComponentsReady', function() {
       document.querySelector('your-element').show();
});

— 우후 코머
소스

-3

본문 태그 완료 후 스크립트를 넣으십시오 ... 작동합니다 ...

— 칼리 안
소스

페이지로드 완료 후 기능 실행

자바 스크립트

jQuery와 동일합니다.