javascript - 이미지 - 페이지 로딩시 자바스크립트 실행




페이지로드 후 실행되는 JavaScript (16)

페이지로드에는 두 단계 이상의 단계가 있습니다. Btw, 이것은 순수한 JavaScript입니다.

"DOMContentLoaded"

이 이벤트는 스타일 시트, 이미지 및 하위 프레임 로드가 완료 될 때까지 기다리지 않고 초기 HTML 문서가 완전히로드되고 구문 분석 될 때 발생합니다. 이 단계에서는 사용자 장치 또는 대역폭 속도를 기반으로 이미지 및 CSS로드를 프로그래밍 방식으로 최적화 할 수 있습니다.

DOM이로드 된 후 (img 및 css 전)의 Exectues :

document.addEventListener("DOMContentLoaded", function(){
    //....
});

참고 : 동기식 JavaScript는 DOM 구문 분석을 일시 중지합니다. 사용자가 페이지를 요청한 후 DOM이 가능한 한 빨리 구문 분석되도록하려면 JavaScript를 비동기로 설정 하고 스타일 시트로드를 최적화 할 수 있습니다

"하중"

매우 다른 이벤트 인 load완전히로드 된 페이지 를 탐지하는 데에만 사용해야 합니다 . 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 목록 :

https://developer.mozilla.org/en-US/docs/Web/Events

<script><head> 안에 사용하여 외부 스크립트를 실행하고 있습니다.

이제 스크립트가 실행 되기 전에 페이지가로드 되기 때문에 <body> 액세스 할 수 없습니다. 문서를 "로드"한 후 JavaScript를 실행하고 싶습니다 (HTML이 완전히 다운로드되고 RAM에 있음). 스크립트가 실행될 때 연결할 수있는 이벤트가 있습니까? 페이지로드시 트리거됩니다.


// 테스트되고 작동합니다 :)

$ (document) .ready (function () {functon1 (); function2 ()});


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


jQuery 래퍼. 아마 가장 쉬운 해결책이라고 생각할 것입니다.


나는 때로는 모든 요소가 시간 창에 의해로드되지 않은 복잡한 페이지를 찾습니다.로드가 시작되었습니다. 이 경우 지연을위한 함수가 잠시 전에 setTimeout을 추가하십시오. 그것은 우아하지는 않지만 렌더링이 간단한 해킹입니다.

window.onload = function(){ doSomethingCool(); };

된다.

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };

내 스크립트 태그에 대한 asnyc 속성을 사용하여 페이지로드 후 외부 스크립트를로드하는 데 도움이됩니다.

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>

본문에 "onload"속성을 넣을 수 있습니다.

...<body onload="myFunction()">...

jQuery를 사용하고 있다면, 할 수 있습니다.

$(document).ready(function(){ /*code here*/ }) 

or 

$(window).load(function(){ /*code here*/ })

나는 그것이 당신의 질문에 대답하기를 바랍니다.

문서가 페이지에 렌더링 된 후에 $ (window) .load가 실행됩니다.


스크립트가 문서의 <head> 내에로드되면 script 태그에 defer 속성을 사용할 수 있습니다.

예:

<script src="demo_defer.js" defer></script>

https://developer.mozilla.org :

연기하다

이 부울 속성은 문서가 구문 분석 된 후 DOMContentLoaded가 실행되기 전에 스크립트가 실행될 예정임을 브라우저에 알리기 위해 설정됩니다.

이 속성은 src 속성이 없으면 (즉, 인라인 스크립트의 경우) 사용되어서는 안되며,이 경우 효과가 없습니다.

동적으로 삽입 된 스크립트에 대해 유사한 효과를 얻으려면 대신 async = false를 사용하십시오. defer 속성이있는 스크립트는 문서에 나타나는 순서대로 실행됩니다.


이 코드를 jQuery 라이브러리와 함께 사용하면 완벽하게 작동합니다.

$(window).bind("load", function() { 

  // your javascript event

});

이러한 솔루션은 다음과 같이 작동합니다.

<body onload="script();">

또는

document.onload = function ...

또는

window.onload = function ...

마지막 옵션unobstrusive 않으며 보다 표준적인 것으로 간주 되므로 더 좋은 방법 입니다.


페이지가로드 된 후에 호출 될 <body onload="aFunction()"> 을 정의하십시오. 스크립트의 코드는 aFunction() { } 의해 둘러싸여 있습니다.


문서가 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" );
    });

document.onload 또는 jQuery $(document).load(...) 를 후킹하십시오.


$ (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>

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>


<body onload="myFunction()">

이 코드는 잘 작동합니다.

하지만 window.onload 메소드는 다양한 의존성을 가지고 있습니다. 그래서 항상 작동하지 않을 수 있습니다.







pageload