페이지가 완전히 로드되었을 때 기능을 실행하는 방법은 무엇입니까?
페이지가 완전히 로딩되면 자바스크립트 코드를 실행해야 합니다.여기에는 이미지와 같은 것들이 포함됩니다.
DOM이 준비되었는지 확인할 수 있지만, 페이지가 가득 찼을 때와 같은지 모르겠습니다.
라고 합니다.loadDOM ready가 시작되기 전에 DOM ready가 실제로 작성되었습니다.load이미지를 기다렸습니다.
window.addEventListener('load', function () {
alert("It's loaded!")
})
보통 사용하실 수 있습니다.window.onload단, 최신 브라우저는 부팅되지 않을 수 있습니다.window.onload[뒤로/앞으로]버튼을 사용할 때 사용합니다.
어떤 사람들은 이 문제를 해결하기 위해 이상한 변형을 제안합니다. 하지만 만약 당신이 정말로 단지 그것을 만든다면.window.onunload핸들러(아무것도 하지 않는 핸들러도), 이 캐싱 동작은 모든 브라우저에서 비활성화됩니다.MDC는 이 '기능'을 상당히 잘 문서화하고 있지만, 어떤 이유로든 여전히 사용하고 있는 사용자가 있습니다.setInterval다른 이상한 해킹들도요
Opera 일부 버전에는 페이지에 다음 항목을 추가하여 해결할 수 있는 버그가 있습니다.
<script>history.navigationMode = 'compatible';</script>
뷰당 한 번(DOM 로드가 끝난 후가 아니라)이라고 하는 Javascript 기능을 얻으려고 하면 다음과 같은 작업을 수행할 수 있습니다.
<img src="javascript:location.href='javascript:yourFunction();';">
예를 들어 로딩 화면의 캐시에 매우 큰 파일을 프리로드하려면 다음 방법을 사용합니다.
<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">
완전성을 위해 현재 널리 지원되는 DOMContentLoaded에 바인드할 수도 있습니다.
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});
상세정보 : https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
페이지 전체가 로드된 후에만 실행
Javascript별
window.onload = function(){
// code goes here
};
Jquery에 의해
$(window).bind("load", function() {
// code goes here
});
이 코드를 사용해 보세요.
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
}
}
자세한 것은, https://developer.mozilla.org/en-US/docs/DOM/document.readyState 를 참조해 주세요.
window.onload 이벤트는 이미지 등을 포함한 모든 항목이 로드되면 실행됩니다.
JS 코드를 가능한 한 빨리 실행하고 싶지만 여전히 DOM 요소에 액세스해야 하는 경우 DOM 준비 상태를 체크해야 합니다.
를 사용한 JavascriptonLoad()실행 전에 페이지가 로드될 때까지 기다립니다.
<body onload="somecode();" >
jQuery 프레임워크의 문서 준비 기능을 사용하는 경우 DOM이 로드되는 즉시 페이지 내용이 로드되기 전에 코드가 로드됩니다.
$(document).ready(function() {
// jQuery code goes here
});
문서에는 DOM이 모두 준비되고 페이지 내의 다른 모든 자산(이미지 등)이 로드될 때까지 부팅되지 않는 것으로 나타나므로 window.onload를 사용하는 것이 좋습니다.
javascript를 에서는 "javascript(>= 2015)"를 추가할 수 .type="module"이치노 다음과 같습니다.
<script type="module">
alert("runs after") // Whole page loads before this line execute
</script>
<script>
alert("runs before")
</script>
오래된 는 ""를 합니다.nomodule거 요.다음과 같이 합니다.
<script nomodule>
alert("tuns after")
</script>
상세한 것에 대하여는, javascript.info 를 참조해 주세요.
시제품을 사용하여 이를 수행하는 방법은 다음과 같습니다.JS:
Event.observe(window, 'load', function(event) {
// Do stuff
});
GlobalEventHandlers mixin의 onload 속성은 Window, XMLHttpRequest, element 등의 로드이벤트에 대한 이벤트핸들러입니다리소스가 로드되었을 때 실행됩니다.
따라서 기본적으로 javascript는 이미 이미지를 포함한 페이지를 모두 로드하는 온로드 방식을 창에 가지고 있습니다.
다음과 같은 작업을 수행할 수 있습니다.
var spinner = true;
window.onload = function() {
//whatever you like to do now, for example hide the spinner in this case
spinner = false;
};
개를 해야 하는 onload$(window).load(jQuery):
$(window).load(function() {
//code
});
@Matchu 및 @abSiddique의 답변을 완성합니다.
이것은, 다음과 같습니다.
window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});
하지만, 「이것」을합니다.onload다음 중 하나:
window.onload = (event) => {
console.log('page is fully loaded');
};
출처:
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
라이브 예:
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event#live_example
2019년 업데이트:이것이 나에게 효과가 있는 대답이었다.목록 항목을 세기 위해 먼저 데이터를 실행하고 반환하기 위해 여러 개의 AJAX 요청이 필요했기 때문입니다.
$(document).ajaxComplete(function(){
alert("Everything is ready now!");
});
언급URL : https://stackoverflow.com/questions/1033398/how-to-execute-a-function-when-page-has-fully-loaded
'programing' 카테고리의 다른 글
| mysql 워크벤치를 통해 mysql 데이터베이스로 데이터를 Import하려면 어떻게 해야 합니까? (0) | 2022.09.27 |
|---|---|
| Ajax 성공 이벤트가 작동하지 않음 (0) | 2022.09.26 |
| 조건부로 Select Input 값 변경 방지 (0) | 2022.09.26 |
| Java 키스토어의 PEM 포맷으로의 변환 (0) | 2022.09.26 |
| 출발지가 Access-Control-Allow-Origin에서 허용되지 않습니다. (0) | 2022.09.26 |