code

jQuery 이벤트 .load (), .ready (), .unload ()

codestyles 2020. 10. 29. 08:09
반응형

jQuery 이벤트 .load (), .ready (), .unload ()


jQuery 이벤트에 대한 간단한 질문입니다. .load (), .ready () 및 .unload ()는 DOM이로드 될 때 순서대로 실행됩니까? 대답은 jQuery 문서를 볼 때 예인 것 같습니다.

<script type="text/javascript">

    $(window).load(function () {
        // run code
        initializeCode();
    });

    $(document).ready(function() {
        //run code that MUST be after initialize
    });

    $(window).unload(function() {
        Cleanup();
    });
</script>

그러나 .ready () 내부의 코드는 initializeCode () 전에 실행됩니다. 실행되어서 정말 이상하다고 느낍니다. 이제 .onload () 메서드와 initializeCode (); 바로 뒤에 코드를 배치해야합니다. 이는 .ready () 블록 안에 있음을 의미합니다.

내가 jQuery를 처음 접했기 때문에 누군가 이것에 대해 더 자세히 설명해 줄 수 있습니까?


참고 : .load()& .unload()더 이상 사용되지 않습니다.


$(window).load();

페이지의 모든 내용과 함께로드가 완료된 후 실행됩니다. 즉, 모든 이미지, CSS (및 사용자 정의 글꼴 및 이미지와 같은 CSS에 의해 정의 된 콘텐츠), 스크립트 등이 모두로드됩니다. 브라우저의 "중지"아이콘이 회색으로 변하면 이벤트가 발생합니다. 이것은 문서가 모든 내용과 함께로드되는시기를 감지하는 데 매우 유용합니다.

$(document).ready();

반면에 이것은 웹 브라우저가 JavaScript를 실행할 수있게되는 즉시 실행되며, 이는 파서가 DOM으로 완료된 후에 발생합니다. 가능한 한 빨리 JavaScript를 실행하려는 경우 유용합니다.

$(window).unload();

이 이벤트는 페이지를 탐색 할 때 시작됩니다. 새로 고침 / F5, 이전 페이지 버튼 누르기, 다른 웹 사이트로 이동 또는 전체 탭 / 창 닫기가 될 수 있습니다.

요약하자면, ready ()는 load () 전에 실행되고 unload ()는 마지막으로 실행됩니다.


창로드는 모든 리소스가로드 될 때까지 대기합니다.

문서 준비문서가 초기화 될 때까지 기다립니다.

잘 언로드하고 문서가 언로드 될 때까지 기다립니다.

순서는 문서 준비, 창로드, ... ... ... ... 창 언로드입니다.

이미지가로드 될 때까지 기다릴 필요 없는 한 항상 문서 준비를 사용 하십시오.

문서 준비의 약자 :

$(function(){
    // yay!
});

두 "document.ready"변형이 모두 사용되면 둘 다 실행되는 순서대로 실행됩니다.

$(function(){
    alert('shorthand document.ready');
});

//try changing places
$(document).ready(function(){
    alert('document.ready');
});

또한 .load와 .ready의 차이점이 하나 더 있습니다. 나는 자식 창을 열고 있고 자식 창이 열릴 때 몇 가지 작업을 수행하고 있습니다. .load는 창을 열 때만 처음 호출되며 창을 닫지 않으면 .load가 다시 호출되지 않습니다. 그러나 .ready는 자식 창 닫기 여부에 관계없이 매번 호출됩니다.

참고 URL : https://stackoverflow.com/questions/2683072/jquery-events-load-ready-unload

반응형