답변:
이러한 솔루션은 다음과 같이 작동합니다.
<body onload="script();">또는
document.onload = function ...또는
window.onload = function ...참고 것을 마지막 옵션은 갈 수있는 더 좋은 방법 이 있기 때문에 unobstrusive 하고 더 표준으로 간주 .
document.onload=is non obtrusive en.wikipedia.org/wiki/Unobtrusive_JavaScript
로드 타임에 스크립트가 실행되도록 기능을 설정하는 합리적인 프레임 워크가 아닌 프레임 워크 방식 :
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;
}
}이 이벤트는 스타일 시트, 이미지 및 서브 프레임이로드를 완료 할 때까지 기다리지 않고 초기 HTML 문서가 완전히로드되고 구문 분석 될 때 시작됩니다. 이 단계에서는 사용자 장치 또는 대역폭 속도에 따라 이미지 및 CSS 로딩을 프로그래밍 방식으로 최적화 할 수 있습니다.
DOM이로드 된 후 실행 (img 및 css 이전) :
document.addEventListener("DOMContentLoaded", function(){
//....
});참고 : 동기 JavaScript는 DOM 구문 분석을 일시 중지합니다. 사용자가 페이지를 요청한 후 DOM을 가능한 빨리 구문 분석하려면 JavaScript를 비동기로 설정 하고 스타일 시트로드를 최적화 하십시오.
매우 다른 이벤트 인 load 는 완전히로드 된 페이지 를 감지하는 데만 사용해야 합니다 . DOMContentLoaded가 훨씬 더 적합 할 때 load를 사용하는 것은 매우 인기있는 실수이므로 조심하십시오.
모든 것이로드되고 파싱 된 후에 실행됩니다 :
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 목록 :
window.onload = ...모든 것이 완벽하게 실행하기 전에 다운로드 한 때까지 내 스크립트를 기다릴 것이라고 생각하지만 것 window.onload같은 실제로 동작합니다을 document.addEventListener("DOMContentLoaded", ...(가) 반면에, window.addEventListener("load", ...정말 모든 것이 완전히 다운로드 될 때까지 기다립니다 않습니다. 나는 그것이 오히려 오히려 window.onload동등해야한다고 생각했을 window.addEventListener("load", ...것입니다 document.addEventListener("DOMContentLoaded", ...?? Chrome과 FF에서 동일한 결과를 얻었습니다.
스크립트가 <head>문서 내에로드 된 경우 defer스크립트 태그 의 속성을 사용할 수 있습니다 .
예:
<script src="demo_defer.js" defer></script>에서 https://developer.mozilla.org :
연기하다
이 부울 속성은 문서가 구문 분석 된 후 DOMContentLoaded를 실행하기 전에 스크립트가 실행됨을 브라우저에 표시하도록 설정됩니다.
src 속성이없는 경우 (즉, 인라인 스크립트의 경우)이 속성을 사용하면 안됩니다.이 경우에는 효과가 없습니다.
동적으로 삽입 된 스크립트에 대해 비슷한 효과를 얻으려면 async = false를 대신 사용하십시오. defer 속성을 가진 스크립트는 문서에 나타나는 순서대로 실행됩니다.
다음은 페이지가로드 된 후 지연된 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 파일의 맨 아래 근처에있는 태그 바로 앞에 HTML에 코드를 붙여 넣습니다 .
무엇을합니까?
이 코드는 전체 문서가로드 될 때까지 기다렸다가 외부 파일을로드한다고 말합니다
deferredfunctions.js.
위 코드의 예는 다음과 같습니다. JS의 렌더링 지연
나는 자바 스크립트 pagespeed 구글 개념의 지연 로딩을 기반으로 이것을 작성 했으며이 기사에서 제공했습니다.
후킹 document.onload이나 jQuery를 살펴보십시오 $(document).load(...).
작업 바이올린 에<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><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
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
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를 사용하여 문서가로드되었는지 감지 하는 방법에 대한 훌륭한 문서가 있습니다.
네이티브 자바 스크립트를 사용하면이를 달성 할 수 있습니다
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
});$(window).on("load", function(){ ... });.ready () 가 가장 효과적입니다.
$(document).ready(function(){ ... });.load () 는 작동하지만 페이지가로드 될 때까지 기다리지 않습니다.
jQuery(window).load(function () { ... });나를 위해 작동하지 않으며 다음 인라인 스크립트를 중단합니다. 또한 다른 jQuery 포크와 함께 jQuery 3.2.1을 사용하고 있습니다.
오버레이를로드하는 웹 사이트를 숨기려면 다음을 사용하십시오.
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>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");
}
});$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});참고 : -아래의 마크 업을 사용하지 마십시오 (다른 동종 선언을 덮어 쓰기 때문에).
document.onreadystatechange = ...asnyc페이지로드 후 외부 스크립트를로드하는 데 도움이되는 스크립트 태그에 대한 내 조언 사용 속성
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>자체 실행 온로드 기능 사용
window.onload = function (){
/* statements */
}(); onload이 방법을 사용하여 다른 처리기를 재정의 할 수 있습니다 . 대신 리스너를 추가해야합니다.