페이지로드 후 실행되는 JavaScript
-
03-07-2019 - |
문제
a를 사용하여 외부 스크립트를 실행하고 있습니다 <script>
내부에 <head>
.
이제 스크립트가 실행 된 이후 ~ 전에 페이지가로드되었고 액세스 할 수 없습니다 <body>
, 다른 것들 사이. 문서가 "로드"된 후 일부 JavaScript를 실행하고 싶습니다 (HTML 완전히 다운로드 및 인쇄). 내 스크립트가 실행될 때 연결할 수있는 이벤트가 있습니까? 페이지로드에서 트리거됩니다.
해결책
이 솔루션은 다음과 같습니다.
<body onload="script();">
또는
document.onload = function ...
또는
window.onload = function ...
주목하십시오 마지막 옵션은 더 나은 방법입니다 그이기 때문에 눈에 잘 띄지 않습니다 그리고입니다 더 표준으로 간주됩니다.
다른 팁
합리적으로 휴대하기 쉬운 비 프레임 워크 스크립트를로드 시간에 실행하도록 함수를 설정하는 방법입니다.
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;
}
}
페이지로드에는 하나 이상의 단계가 있습니다. BTW, 이것은 순수한 JavaScript입니다
"domcontentloaded"
이 이벤트는 해고 될 때 해고됩니다 초기 HTML 문서가 완전히로드되고 구문 분석되었습니다, 스타일 시트, 이미지 및 서브 프레임을 기다리지 않고로드를 완료합니다. 이 단계에서는 사용자 장치 또는 대역폭 속도를 기반으로 이미지 및 CSS로드를 프로그래밍 방식으로 최적화 할 수 있습니다.
DOM이로드 된 후 (IMG 및 CSS 이전) :
document.addEventListener("DOMContentLoaded", function(){
//....
});
참고 : 동기식 JavaScript는 DOM의 구문 분석을 일시 중지합니다. 사용자가 페이지를 요청한 후 DOM이 가능한 빨리 구문 분석되기를 원한다면 JavaScript 비동기식을 돌립니다 그리고 스타일 시트의 로딩을 최적화하십시오
"짐"
매우 다른 이벤트, 짐, a를 감지하는 데만 사용해야합니다 완전히로드 된 페이지. DomContentLoaded가 훨씬 더 적절한 곳에서로드를 사용하는 것은 매우 인기있는 실수이므로 신중해야합니다.
모든 것이로드되고 구문 분석 된 후에 :
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 목록 :
몸 안에 "온부하"속성을 넣을 수 있습니다.
...<body onload="myFunction()">...
또는 jQuery를 사용하는 경우 할 수 있습니다.
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
나는 그것이 당신의 질문에 대답하기를 바랍니다.
문서가 페이지에서 렌더링 된 후 $ (창) .load가 실행됩니다.
스크립트가 <head>
문서의 경우 사용 가능합니다. defer
스크립트 태그의 속성.
예시:
<script src="demo_defer.js" defer></script>
에서 https://developer.mozilla.org:
연기
이 부울 속성은 브라우저에 문서가 구문 분석 된 후에는 스크립트가 실행되지만 DomContentLoaded를 발사하기 전에 실행해야한다는 것을 나타내도록 설정됩니다.
이 속성은 SRC 속성이없는 경우 (예 : 인라인 스크립트의 경우) 사용하지 않아야합니다.이 경우에는 영향을 미치지 않습니다.
동적으로 삽입 된 스크립트에 대해 유사한 효과를 얻으려면 대신 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>
어디에 배치합니까?
직전에 HTML에 코드를 붙여 넣으십시오
</body>
태그 (HTML 파일의 하단 근처).
그것은 무엇을합니까?
이 코드는 전체 문서가로드 될 때까지 기다린 다음 외부 파일을로드합니다.
deferredfunctions.js
.
위의 코드의 예는 다음과 같습니다. JS의 렌더링을 연기합니다
나는 이것을 기준으로 썼다 JavaScript의 연기 로딩 Pagespeed Google 개념 과이 기사에서도 소스를 소지하십시오 로드 JavaScript를 연기합니다
훅킹을보세요 document.onload
또는 jQuery에서 $(document).load(...)
.
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
이봐: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Google에서 권장하는 최상의 방법. :)
<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
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
jQuery를 사용하는 경우
$(function() {...});
동일합니다
$(document).ready(function () { })
<body onload="myFunction()">
이 코드는 잘 작동합니다.
하지만 window.onload
방법에는 다양한 종속성이 있습니다. 따라서 항상 작동하지 않을 수 있습니다.
때로는 시간 창에 의해 모든 요소가로드 된 것은 아니며,로드가 발생하는 것은 때때로 더 복잡한 페이지에서 찾을 수 있습니다. 이 경우 기능을 지연시키기 전에 설정 타임 아웃을 추가하는 것이 순간입니다. 우아하지는 않지만 잘 렌더링하는 간단한 해킹입니다.
window.onload = function(){ doSomethingCool(); };
...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
그냥 정의하십시오 <body onload="aFunction()">
페이지가로드 된 후에 호출됩니다. 스크립트의 코드는 동봉 한 것 이상입니다 aFunction() { }
.
$ (window) .on ( "load", function () {...});
.준비가 된() 나를 위해 가장 잘 작동합니다.
$(document).ready(function(){ ... });
.짐() 작동하지만 페이지가로드 될 때까지 기다리지 않습니다.
jQuery(window).load(function () { ... });
나에게 효과가없고 다음 인라인 스크립트를 깨뜨립니다. 또한 다른 jQuery 포크와 함께 jQuery 3.2.1을 사용하고 있습니다.
오버레이로드 웹 사이트를 숨기려면 다음을 사용합니다.
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
사용 유비 도서관 (나는 그것을 좋아한다) : :
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 사용.
기본 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를 사용하여 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
});
Daniel이 말했듯이 Document.onload를 사용할 수 있습니다.
다양한 JavaScript 프레임 워크 hwoever (jQuery, mootools 등)는 사용자 정의 이벤트 'domready'를 사용합니다. 이는 더 효과적이어야합니다. JavaScript로 개발 중이라면 프레임 워크 악용을 적극 권장하며 생산성을 크게 증가시킵니다.
나의 조언 사용 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>
자체 실행 onload 기능을 사용하십시오
window.onload = function (){
/* statements */
}();