it-source

다른 모든 항목이 로드될 때까지 jquery 스크립트 지연

criticalcode 2023. 8. 29. 20:42
반응형

다른 모든 항목이 로드될 때까지 jquery 스크립트 지연

다른 자바스크립트(제어할 수 없는)를 포함하여 페이지의 다른 모든 것을 한 번만 실행하면 되는 jquery 스크립트가 있습니다.

저는 아마도 $(문서)에 대한 대안이 있을 것이라고 생각했습니다.준비는 되었지만 찾을 수가 없었어요.

가질 수 있습니다.$(document).ready()한 페이지에서 여러 번코드는 나타나는 순서대로 실행됩니다.

사용할 수 있습니다.$(window).load()페이지가 완전히 로드되고 다양한 코드가 모두 로드된 후에 발생하기 때문에 코드에 대한 이벤트$(document).ready()핸들러 실행이 완료되었습니다.

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

이 코드 블록은 내 문제를 해결합니다.

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

다중$(document).ready()위에서 아래로 내려가기 위해 발사될 것입니다.최후의$(document).ready()페이지에서 마지막으로 발사됩니다.마지막 내부$(document).ready()다른 모든 이벤트가 발생하도록 새로운 사용자 지정 이벤트를 트리거할 수 있습니다.

새 사용자 지정 이벤트에 대한 이벤트 핸들러에 코드를 래핑합니다.

<html>
<head>
<script>
    $(document).on("my-event-afterLastDocumentReady", function () {
        // Fires LAST
    });
    $(document).ready(function() {
        // Fires FIRST
    });
    $(document).ready(function() {
        // Fires SECOND
    });
    $(document).ready(function() {
        // Fires THIRD
    });
</script>
<body>
... other code, scripts, etc....
</body>
</html>

<script>
    $(document).ready(function() {
        // Fires FOURTH
        // This event will fire after all the other $(document).ready() functions have completed.
        // Usefull when your script is at the top of the page, but you need it run last
        $(document).trigger("my-event-afterLastDocumentReady");
    });
</script>

여기서:

// Add jQuery 
var GM_JQ = document.createElement('script'); 
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(GM_JQ); 

// Check if jQuery's loaded 
function GM_wait() 
{ 
    if(typeof unsafeWindow.jQuery == 'undefined') 
    { 
        window.setTimeout(GM_wait,100); 
    } 
    else 
    { 
        $ = unsafeWindow.jQuery; 
        letsJQuery(); 
    } 
} 

GM_wait(); 

// All your GM code must be inside this function 
function letsJQuery() 
{
    // Do your jQuery stuff in here    
} 

jQuery를 로드하여 사용할 때까지 기다리지만 동일한 개념을 사용하여 다른 스크립트에서 변수를 설정하거나 스크립트가 아닌 경우 변수를 확인하여 로드하여 사용할 때까지 기다릴 수 있습니다.

예를 들어, 내 사이트에서 비동기 JS 로드 및 완료될 때까지 기다렸다가 jQuery를 사용하여 작업을 수행합니다.

<script type="text/javascript" language="JavaScript"> 
    function js(url){
        s = document.createElement("script");
        s.type = "text/javascript";
        s.src = url;
        document.getElementsByTagName("head")[0].appendChild(s);
    }       

    js("/js/jquery-ui.js");
    js("/js/jrails.js");
    js("/js/jquery.jgrowl-min.js");
    js("/js/jquery.scrollTo-min.js");
    js("/js/jquery.corner-min.js");
    js("/js/jquery.cookie-min.js");
    js("/js/application-min.js");

    function JS_wait() {
        if (typeof $.cookie == 'undefined' || // set in jquery.cookie-min.js
            typeof getLastViewedAnchor == 'undefined' || // set in application-min.js
            typeof getLastViewedArchive == 'undefined' || // set in application-min.js 
            typeof getAntiSpamValue == 'undefined') // set in application-min.js
        { 
            window.setTimeout(JS_wait, 100); 
        }
        else 
        { 
            JS_ready(); 
        }
    }

    function JS_ready() {
        // snipped
    };

    $(document).ready(JS_wait);
</script> 

다음을 사용하여 모든 초기화 기능을 로드해 보셨습니까?$().ready마지막으로 원하는 jQuery 기능을 실행하시겠습니까?

아마도 당신은 사용할 수 있습니다.setTimeout()에서$().ready실행하려는 함수를 호출하여 로드할 함수를 호출합니다.

또는 사용setInterval()및 간격을 확인하여 다른 모든 로드 함수가 완료되었는지 확인합니다(상태를 부울 변수에 저장).조건이 충족되면 간격을 취소하고 로드 기능을 실행할 수 있습니다.

자바스크립트 프레임워크의 독특한 혼합 때문에 다른 프레임워크 중 하나가 제공하는 이벤트 청취자를 사용하여 스크립트를 시작해야 했습니다.

다음 스크립트는 다음을 보장합니다.my_finalFunction페이지가 이미지, 스타일시트 및 외부 콘텐츠로 완전히 로드된 후 실행됩니다.

<script>

    document.addEventListener("load", my_finalFunction, false);

    function my_finalFunction(e) {
        /* things to do after all has been loaded */
    }

</script>

키루파는 적절한 시간에 코드를 실행하는 것에 대한 좋은 설명을 제공합니다. https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm 을 참조하십시오.

언급URL : https://stackoverflow.com/questions/1012140/delaying-a-jquery-script-until-everything-else-has-loaded

반응형