페이지 로드 후 JavaScript를 실행하는 방법
대본을 쓰고 <script>에 inside inside inside <head>.
페이지가 로드되기 전에 스크립트가 실행되므로<body>른른른른「HTML」의 「RAM」의 「JavaScript는 「HTML」입니다.스크립트 실행 시 페이지 로드 시 트리거되는 이벤트가 있습니까?
다음의 솔루션이 유효합니다.
코멘트에 기재된 바와 같이 defer 사용:
<script src="deferMe.js" defer></script>
또는
<body onload="script();">
또는
document.onload = function ...
또는 심지어
window.onload = function ...
마지막 옵션은 방해가 되지 않고 보다 표준적인 것으로 간주되므로 더 나은 방법입니다.
적절한 타이밍에 스크립트 트리거
A quick overview on how to load / run the script at the moment in which they intend to be loaded / executed."defer" 사용
<script src="script.js" defer></script>
지연을 사용하면 돔 이후에 트리거됩니다.대화형(document.readyState = "documentive") 및 "DOMContentLoaded" 이벤트가 트리거되기 직전.모든 리소스(이미지, 스크립트)가 로드된 후 스크립트를 실행해야 하는 경우 "로드" 이벤트를 사용하거나 문서 중 하나를 대상으로 합니다.readyState 상태.이러한 이벤트/상태 및 스크립트 가져오기 및 실행 타이밍에 대응하는 비동기 및 지연 속성에 대한 자세한 내용은 아래를 참조하십시오.
이 부울 속성은 문서가 해석된 후 DOMContentLoaded를 실행하기 전에 스크립트가 실행되도록 브라우저에 표시하도록 설정됩니다.
defer 속성을 가진 스크립트는 스크립트가 로드되어 평가가 완료될 때까지 DOMContentLoaded 이벤트가 실행되지 않습니다.
리소스: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes
* 깃털에 대한 설명은 하단의 이미지를 참조하십시오.
이벤트 리스너 - 페이지 로드에는 두 개 이상의 이벤트가 있습니다.
"DOM Content Loaded"
이 이벤트는 스타일시트, 이미지 및 서브프레임 로드가 완료될 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석될 때 실행됩니다.이 단계에서는 사용자 디바이스 또는 대역폭 속도에 따라 이미지와 CSS 로드를 프로그래밍 방식으로 최적화할 수 있습니다.
DOM CSS:
document.addEventListener("DOMContentLoaded", function(){
//....
});
주의: 동기 JavaScript는 DOM 의 해석을 일시 정지합니다.사용자가 페이지를 요청한 후 가능한 빨리 DOM을 구문 분석하려면 JavaScript를 비동기식으로 돌려 스타일시트 로드를 최적화할 수 있습니다.
「로드"
A very different event, **load**, should only be used to detect a *fully-loaded page*. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.모든 항목이 로드되고 구문 분석된 후 실행됩니다.
document.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
radyStates가 있는 이벤트 청취자 - 대체 솔루션(readystatechange):
You can also track document.readystatechange states to trigger script execution.// Place in header (do not use async or defer)
document.addEventListener('readystatechange', event => {
switch (document.readyState) {
case "loading":
console.log("document.readyState: ", document.readyState,
`- The document is still loading.`
);
break;
case "interactive":
console.log("document.readyState: ", document.readyState,
`- The document has finished loading DOM. `,
`- "DOMContentLoaded" event`
);
break;
case "complete":
console.log("document.readyState: ", document.readyState,
`- The page DOM with Sub-resources are now fully loaded. `,
`- "load" event`
);
break;
}
});
MDN 리소스: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
스크립트를 배치하는 장소(비동기/디퍼 유무)
This is also very important to know where to place your script and how it positions in HTML as well as parameters like defer and async will affects script fetching, execution and HTML blocking.* On the image below the yellow label “Ready” indicates the moment of ending loading HTML DOM. Then it fires: document.readyState = "interactive" >>> defered scripts >>> DOMContentLoaded event (it's sequential);
스크립트에서 비동기 또는 지연을 사용하는 경우 https://flaviocopes.com/javascript-async-defer/ 를 참조하십시오.
로드 시 실행되도록 스크립트를 설정하기 위한 적절한 휴대성, 프레임워크 이외의 방법:
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;
}
}
본문 내부에 "부하" 속성을 넣을 수 있습니다.
...<body onload="myFunction()">...
또는 jQuery를 사용하는 경우 다음을 수행할 수 있습니다.
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
그게 당신의 질문에 답하길 바랍니다.
$(윈도우)에 주의해 주세요.페이지에 문서가 렌더링된 후 로드가 실행됩니다.
<head>이 '아니다', '아니다', '아니다', '아니다'를 사용할 수 .defer츠미야
예:
<script src="demo_defer.js" defer></script>
https://developer.mozilla.org 에서 :
미루다
이 부울 속성은 문서가 해석된 후 DOMContentLoaded를 실행하기 전에 스크립트가 실행되도록 브라우저에 표시하도록 설정됩니다.
src Atribut이 존재하지 않는 경우(인라인 스크립트의 경우) 이 Atribut은 사용하지 마십시오.이 경우 효과가 없습니다.
동적으로 삽입된 스크립트에 대해서도 동일한 효과를 얻으려면 대신 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>
이거 어디에 둬야 돼?
바로 넣습니다.
</body>（ HTML ） 태를를를를를를를를를 。
그게 뭘 하는데?
는 문서 로드될 합니다.
deferredfunctions.js.
저는 javascript 페이지 페이드 구글 컨셉의 로딩과 이 기사 Delay javascript 로딩에 기초하여 이 글을 썼습니다.
을 .document.onload jQuery "jQuery "로 지정합니다.$(document).load(...).
자바스크립트
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 = ...
<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
바이올린을 켜다<body onload="myFunction()">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction(){
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
더 복잡한 페이지에서 일부 요소가 시간 창.onload까지 로드되지 않는 경우가 있습니다.이 경우 set Timeout을 추가한 후 지연시키는 함수를 잠시 기다려 주십시오.우아하지는 않지만 잘 렌더링되는 단순한 해킹입니다.
window.onload = function(){ doSomethingCool(); };
...가 된다.
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
jQuery를 사용하는 경우
$(function() {...});
와 동등하다
$(document).ready(function () { })
또는 다른 짧은 손:
$().ready(function () { })
JQuery $function()이 기동하는 이벤트 및 https://api.jquery.com/ready/를 참조하십시오.
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
여기를 봐주세요.http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
정의만 하면<body onload="aFunction()">페이지가 로드된 후 호출됩니다.스크립트 내의 코드는 다음 항목에 의해 둘러싸여 있습니다.aFunction() { }.
<body onload="myFunction()">
이 코드는 올바르게 동작합니다.
그렇지만window.onload메서드에는 다양한 종속성이 있습니다.그래서 항상 효과가 있는 것은 아닐지도 모릅니다.
비교
아래 스니펫에서는 선택 방법을 수집하여 그 순서를 보여 줍니다.언급
- 그
document.onload(X)는 최신 브라우저에서는 지원되지 않습니다(이벤트는 발생하지 않습니다). - 사용한다면
<body onload="bodyOnLoad()">(F) 동시에window.onload(E) 첫 번째 1개만 실행됩니다(두 번째 1개를 덮어쓰기 때문에). - 이벤트 핸들러 지정
<body onload="...">(F) 추가에 의해 포장됩니다.onload기능. document.onreadystatechange(D) 덮어쓰기 안 함document .addEventListener('readystatechange'...)(C) 아마 cecasueonXYZevent-like방법은 와는 무관합니다.addEventListener큐(복수의 리스너를 추가할 수 있습니다).이 두 핸들러의 실행 사이에는 아마 아무 일도 일어나지 않을 것입니다.- 모든 스크립트는 타임 스탬프를 콘솔에 기록합니다.단, 액세스 권한을 가진 스크립트도
div타임스탬프도 본문에 씁니다(스크립트 실행 후 "전체 페이지" 링크를 클릭하면 볼 수 있습니다). - ★★★
readystatechange(C,D)는 브라우저에 의해 여러 번 실행되지만 문서 상태가 다릅니다.- loading - 문서 로드 중(스니펫으로 부팅되지 않음)
- interactive - 문서가 구문 분석되고 실행되기 전에 실행됩니다.
DOMContentLoaded - complete - 문서 및 리소스가 로드되고 실행되기 전에 실행됩니다.
body/window onload
<html>
<head>
<script>
// solution A
console.log(`[timestamp: ${Date.now()}] A: Head script`);
// solution B
document.addEventListener("DOMContentLoaded", () => {
print(`[timestamp: ${Date.now()}] B: DOMContentLoaded`);
});
// solution C
document.addEventListener('readystatechange', () => {
print(`[timestamp: ${Date.now()}] C: ReadyState: ${document.readyState}`);
});
// solution D
document.onreadystatechange = s=> {print(`[timestamp: ${Date.now()}] D: document.onreadystatechange ReadyState: ${document.readyState}`)};
// solution E (never executed)
window.onload = () => {
print(`E: <body onload="..."> override this handler`);
};
// solution F
function bodyOnLoad() {
print(`[timestamp: ${Date.now()}] F: <body onload='...'>`);
infoAboutOnLoad(); // additional info
}
// solution X
document.onload = () => {print(`document.onload is never fired`)};
// HELPERS
function print(txt) {
console.log(txt);
if(mydiv) mydiv.innerHTML += txt.replace('<','<').replace('>','>') + '<br>';
}
function infoAboutOnLoad() {
console.log("window.onload (after override):", (''+document.body.onload).replace(/\s+/g,' '));
console.log(`body.onload==window.onload --> ${document.body.onload==window.onload}`);
}
console.log("window.onload (before override):", (''+document.body.onload).replace(/\s+/g,' '));
</script>
</head>
<body onload="bodyOnLoad()">
<div id="mydiv"></div>
<!-- this script must te at the bottom of <body> -->
<script>
// solution G
print(`[timestamp: ${Date.now()}] G: <body> bottom script`);
</script>
</body>
</html>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 To를 사용하여 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
});
$(window).on("load", function(){ ... });
.ready()가 가장 적합합니다.
$(document).ready(function(){ ... });
.load()는 동작하지만 페이지가 로드될 때까지 기다리지 않습니다.
jQuery(window).load(function () { ... });
나한테는 통하지 않아 다음 인라인 스크립트를 망가뜨려.jQuery 3.2.1을 다른 jQuery 포크와 함께 사용하고 있습니다.
오버레이를 로드하는 웹 사이트를 숨기려면 다음을 사용합니다.
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
특정 스크립트 파일에 함수를 작성하여 onload 속성을 사용하여 body 요소에 호출할 수 있습니다.
예:
<script>
afterPageLoad() {
//your code here
}
</script>
스크립트 태그를 사용하여 스크립트를 html 페이지로 호출합니다.
<script src="afterload.js"></script>
다음과 같이 부하 속성을 추가합니다.
<body onload="afterPageLoad();">
Daniel이 말했듯이 document.onload를 사용할 수 있습니다.
다양한 Javascript 프레임워크(jQuery, Mootools 등)는 커스텀 이벤트 'domready'를 사용하기 때문에 더 효과적이라고 생각합니다.javascript를 사용하여 개발한다면 프레임워크 활용을 강력히 권장합니다.이것에 의해 생산성이 대폭 향상됩니다.
YUI 라이브러리 사용법(마음에 들어):
YAHOO.util.Event.onDOMReady(function(){
//your code
});
휴대성과 아름다움!하지만 YUI를 다른 용도로 사용하지 않으면(그 문서를 참조) 사용할 가치가 없다고 생각합니다.
N.B. : 이 코드를 사용하려면 2개의 스크립트를 Import해야 합니다.
<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>
조언 사용법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>이 코드로 페이지 로드를 잡을 수 있습니다.
<script>
console.log("logger saber");
window.onload = (event) => {
console.log('page is fully loaded');
document.getElementById("tafahomNameId_78ec7c44-beab-40de-9326-095f474519f4_$LookupField").value = 1;;
};
</script>
언급URL : https://stackoverflow.com/questions/807878/how-to-make-javascript-execute-after-page-load
'source' 카테고리의 다른 글
| ES6의 "export const"와 "export default"의 비교 (0) | 2022.09.08 |
|---|---|
| 해시맵에서1개의 엔트리를 반복하지 않고 취득하는 방법 (0) | 2022.09.08 |
| Javascript에서 문자열로 사용되는 변수 이름 (0) | 2022.09.08 |
| like 절 JPQL의 매개 변수 (0) | 2022.09.08 |
| 플랫 파일 데이터베이스 (0) | 2022.09.08 |