복붙노트

[JQUERY] $ (창) .load와 $ (문서) .ready의 차이점은 무엇입니까?

JQUERY

$ (창) .load와 $ (문서) .ready의 차이점은 무엇입니까?

해결법


  1. 1.모든 자산이 이미지를 포함한, 로딩을 할 때 부하가 호출됩니다. DOM을 상호 작용에 대한 준비가되면 준비가 시작됩니다.

    모든 자산이 이미지를 포함한, 로딩을 할 때 부하가 호출됩니다. DOM을 상호 작용에 대한 준비가되면 준비가 시작됩니다.

    MDC를, 창로드에서 :

    JQuery와 API 문서, .ready (핸들러)에서 :


  2. 2.페이지의 DOM이 준비가되어 있음을 $ (문서) .ready () 수단을 조작 할 수 있습니다.

    페이지의 DOM이 준비가되어 있음을 $ (문서) .ready () 수단을 조작 할 수 있습니다.

    전체 페이지 (포함. CSS 및 이미지 파일과 같은 구성 요소가) 완전히로드 된 경우 window.load ()가 트리거됩니다.

    당신은 무엇을 달성하려고?


  3. 3.

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

    우리가 jQuery를 사용할 때 위의 코드는 거의 모든 시간을 사용한다.

    우리는 DOM이 준비 후 우리의 jQuery 코드를 초기화 할 때이 코드가 사용됩니다.

    $(window).load()
    

    때때로 당신은 사진을 조작 할 수 있습니다. 예를 들어, 당신은 수직 및 수평으로 사진을 정렬 할 당신은 그렇게하기 위해 사진의 폭과 높이를 얻을 필요가있다. .ready $ (문서)와 () 당신은 할 수 없을 것이다 방문자가 당신이 이미지로드가 완료되면 JQuery와 정렬 기능을 초기화해야하는 경우 이미지 이미로드를 가지고 있지 않은 경우. ) (우리는 $ (창) .load를 사용의 그


  4. 4.$ (문서) .ready DOM이로드 될 때 문서 구조가 준비되면이 발사 그래서, 해고의 jQuery 이벤트입니다.

    $ (문서) .ready DOM이로드 될 때 문서 구조가 준비되면이 발사 그래서, 해고의 jQuery 이벤트입니다.

    $ (창) .load 이벤트는로드 (CSS, 이미지 등 포함) 전체 내용 이후에 발생합니다.

    이것은 큰 차이점이다.


  5. 5.() .ready $ (문서)에 랩 DOM는 ...

    () .ready $ (문서)에 랩 DOM는 ...

    $ (창) .load ()는 문서의 아빠가 ... 의 모든 DOM을 포장입니다

    귀하의 경우하자의 사용은 처리 렌더링 저장합니다.


  6. 6.간단하게 말하면, window.load는 윈도우의 모든 컨텐츠는 DOM이로드 및 문서 구조가 준비 될 때 document.ready가 호출되는 반면로드 될 때 호출된다.

    간단하게 말하면, window.load는 윈도우의 모든 컨텐츠는 DOM이로드 및 문서 구조가 준비 될 때 document.ready가 호출되는 반면로드 될 때 호출된다.


  7. 7.부하 상태는 윈도우 오브젝트가 생성되었으며 DOM 포함한 모든 필요한 구성 요소들이 메모리에로드되고, 다른 페이지에 동일하게 렌더링하기위한 렌더링 엔진에 전달되지 않은 상태이다.

    부하 상태는 윈도우 오브젝트가 생성되었으며 DOM 포함한 모든 필요한 구성 요소들이 메모리에로드되고, 다른 페이지에 동일하게 렌더링하기위한 렌더링 엔진에 전달되지 않은 상태이다.

    반면에 준비 상태를 만들어 그것을 확인 DOM 요소, 이벤트 및 기타 종속 구성 요소는, 렌더링 엔진에 전달 페이지에 렌더링 및 상호 작용과 조작을위한 준비가되어있다.


  8. 8. </ TITLE> <스크립트 SRC = "https://code.jquery.com/jquery-1.12.4.js"> </ script> <script> $ (창) .load (함수 () { VAR IMG = $ ( '# img1로'); 경고 ( "이미지 높이 ="+ img.height () + "로 <br> 이미지 너비 ="+ img.width ()); }); </ script> </ head> <body> <형태 ID = "form1에"RUNAT = "서버"> <DIV> <IMG의 ID = "img1로"SRC = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d"/> </ DIV> </ FORM> </ body> </ HTML></h2> <p><! DOCTYPE HTML> <HTML의 xmlns = "http://www.w3.org/1999/xhtml '> <헤드 RUNAT = "서버"> <TITLE> </ TITLE> <스크립트 SRC = "https://code.jquery.com/jquery-1.12.4.js"> </ script> <script> $ (창) .load (함수 () { VAR IMG = $ ( '# img1로'); 경고 ( "이미지 높이 ="+ img.height () + "로 <br> 이미지 너비 ="+ img.width ()); }); </ script> </ head> <body> <형태 ID = "form1에"RUNAT = "서버"> <DIV> <IMG의 ID = "img1로"SRC = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d"/> </ DIV> </ FORM> </ body> </ HTML></p> </li> <li> <div><hr /></div><h2>9.$ (문서) .ready JQuery와 이벤트입니다. DOM을로드 및 스크립트 조작 할 준비가 자마자 발생합니다. 이 스크립트는 HTML DOM 페이지에 안전하게 액세스 요소의 수 페이지로드 과정에서 최초의 지점입니다. 이 이벤트는, CSS 등이 완전히로드 된 모든 이미지 전에 발생합니다.</h2> <p>$ (문서) .ready JQuery와 이벤트입니다. DOM을로드 및 스크립트 조작 할 준비가 자마자 발생합니다. 이 스크립트는 HTML DOM 페이지에 안전하게 액세스 요소의 수 페이지로드 과정에서 최초의 지점입니다. 이 이벤트는, CSS 등이 완전히로드 된 모든 이미지 전에 발생합니다.</p> <p>전체 페이지 (포함. CSS 및 이미지 파일과 같은 구성 요소가) 완전히로드 된 경우 window.load ()가 트리거됩니다.</p> </li> </ul> <p>from <a href='https://stackoverflow.com/questions/5182016/what-is-the-difference-between-window-load-and-document-ready' target='_blank'>https://stackoverflow.com/questions/5182016/what-is-the-difference-between-window-load-and-document-ready</a> by cc-by-sa and MIT license</p></div> <!-- System - START --> <!-- System - END --> <!-- Adfit_PC - START --> <!-- Adfit_PC - END --> <!-- GoogleAdsenseForResponsive - START --> <div class="tt_adsense_bottom" style="margin-top:30px;"> <DIV class='ads_adsense_img' style='margin:40px 0px 40px 0px;'> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 디스플레이광고만 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8393857339019314" data-ad-slot="7474886381" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </DIV> </div> <!-- GoogleAdsenseForResponsive - END --> <div class="container_postbtn #post_button_group"> <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction'; window.ReactionApiUrl = '//cnpnote.tistory.com/reaction'; window.ReactionReqBody = { entryId: 19409 }</script> <div class="wrap_btn" id="reaction-19409"></div> <script src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-717c7b1234a0a46519d1483dc3db06322985d92c/static/script/reaction-button-container.min.js"></script><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" data-title="[JQUERY] $ (창) .load와 $ (문서) .ready의 차이점은 무엇입니까?" data-description="$ (창) .load와 $ (문서) .ready의 차이점은 무엇입니까? 해결법 1.모든 자산이 이미지를 포함한, 로딩을 할 때 부하가 호출됩니다. DOM을 상호 작용에 대한 준비가되면 준비가 시작됩니다. 모든 자산이 이미지를 포함한, 로딩을 할 때 부하가 호출됩니다. DOM을 상호 작용에 대한 준비가되면 준비가 시작됩니다. MDC를, 창로드에서 : JQuery와 API 문서, .ready (핸들러)에서 : 2.페이지의 DOM이 준비가되어 있음을 $ (문서) .ready () 수단을 조작 할 수 있습니다. 페이지의 DOM이 준비가되어 있음을 $ (문서) .ready () 수단을 조작 할 수 있습니다. 전체 페이지 (포함. CSS 및 이미지 파일과 같은 구성 요소가) 완전히로드 된 경우 window.load.." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="cnpnote" data-pc-url="https://cnpnote.tistory.com/entry/JQUERY-%EC%B0%BD-load%EC%99%80-%EB%AC%B8%EC%84%9C-ready%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C" data-relative-pc-url="/entry/JQUERY-%EC%B0%BD-load%EC%99%80-%EB%AC%B8%EC%84%9C-ready%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C" data-blog-title="복붙노트"><span class="ico_postbtn ico_share">공유하기</span></button> <div class="layer_post" id="tistorySnsLayer"></div> </div><div class="wrap_btn wrap_btn_etc" data-entry-id="19409" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button> <div class="layer_post" id="tistoryEtcLayer"></div> </div></div> <button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="2840920" data-url="https://cnpnote.tistory.com/entry/JQUERY-%EC%B0%BD-load%EC%99%80-%EB%AC%B8%EC%84%9C-ready%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C" data-device="web_pc"><em class="txt_state">구독하기</em><strong class="txt_tool_id">복붙노트</strong><span class="img_common_tistory ico_check_type1"></span></button> <div data-tistory-react-app="SupportButton"></div> </div> <!-- PostListinCategory - START --> <div class="another_category another_category_color_gray"> <h4>'<a href="/category/JQUERY">JQUERY</a>' 카테고리의 다른 글</h4> <table> <tr> <th><a href="/entry/JQUERY-SCRIPT7002-XMLHttpRequest%EC%9D%98-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EC%98%A4%EB%A5%98-0x2ef3%EB%8A%94-%EC%98%A4%EB%A5%98%EB%A1%9C-%EC%9D%B8%ED%95%B4-00002ef3%EC%97%90-%EC%9E%91%EC%97%85%EC%9D%84-%EC%99%84%EB%A3%8C-%ED%95%A0-%EC%88%98-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4">[JQUERY] SCRIPT7002 : XMLHttpRequest의 : 네트워크 오류 0x2ef3는 오류로 인해 00002ef3에 작업을 완료 할 수 없습니다</a>  <span>(0)</span></th> <td>2020.10.11</td> </tr> <tr> <th><a href="/entry/JQUERY-%EC%97%AC%EB%9F%AC-%EC%9E%90%EB%B0%94-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4%EA%B3%BC-%EC%9D%BC%EC%B9%98-%EC%B0%BE%EA%B8%B0">[JQUERY] 여러 자바 스크립트 배열과 일치 찾기</a>  <span>(0)</span></th> <td>2020.10.11</td> </tr> <tr> <th><a href="/entry/JQUERY-%EB%8C%80%ED%99%94-%EC%83%81%EC%9E%90-%EC%8B%A4%ED%96%89-1-%EC%B4%88-%EC%82%AC%EB%9D%BC%EC%A7%88-%ED%95%98%EC%8B%9C%EB%82%98%EC%9A%94">[JQUERY] 대화 상자 실행 1 초 사라질 하시나요?</a>  <span>(0)</span></th> <td>2020.10.11</td> </tr> <tr> <th><a href="/entry/JQUERY-%EC%9E%90%EB%B0%94-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-URL-%ED%99%95%EC%9D%B8%ED%95%98%EB%A0%A4%EA%B3%A0">[JQUERY] 자바 스크립트를 사용하여 URL 확인하려고</a>  <span>(0)</span></th> <td>2020.10.11</td> </tr> <tr> <th><a href="/entry/JQUERY-%EC%9D%BC%EC%B9%98%ED%95%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EC%9D%B5%EB%AA%85-%EB%AA%A8%EB%93%88%EC%9D%84-%EC%A0%95%EC%9D%98">[JQUERY] 일치하지 않는 익명 () 모듈을 정의</a>  <span>(0)</span></th> <td>2020.10.11</td> </tr> </table> </div> <!-- PostListinCategory - END --> </div> <div class="entry-footer"> <div class="actionTrail"> <a href="#tb" onclick=""></a>, <a href="#rp" onclick=""></a> </div> <div data-tistory-react-app="Namecard"></div> </div> </div> </div><!-- entry close --> </article> </div><!-- container close --> <aside role="complementary" id="sidebar"> <div class="container"> <div class="sidebar-inner"> <div class="module module_plugin"> <!-- Adfit_PC - START --> <ins class="kakao_ad_area" style="display:none;" data-ad-unit = "DAN-ubre63wuo3sm" data-ad-width = "160" data-ad-height = "600"></ins> <script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script> <!-- Adfit_PC - END --> </div> <!-- 검색 모듈 --> <div class="widget widget-search col-md-3 col-xs-12"> <h3><i class="icon-magnifier icons"></i> Search</h3> <input type="text" name="search" value="" onkeypress="if (event.keyCode == 13) { try { window.location.href = '/search' + '/' + looseURIEncode(document.getElementsByName('search')[0].value); document.getElementsByName('search')[0].value = ''; return false; } catch (e) {} }"/> <input value="검색" type="button" onclick="try { window.location.href = '/search' + '/' + looseURIEncode(document.getElementsByName('search')[0].value); document.getElementsByName('search')[0].value = ''; return false; } catch (e) {}" class="btn btn-default btn-sm"/> </div> <!-- 카테고리 모듈 --> <div class="widget widget-category col-md-3 col-xs-12"> <h3><i class="icon-direction icons"></i> 카테고리</h3> <ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 </a> <ul class="category_list"><li class=""><a href="/category/PHP" class="link_item"> PHP </a></li> <li class=""><a href="/category/%EC%8A%A4%ED%81%AC%EB%9E%98%EC%B9%98%203.0" class="link_item"> 스크래치 3.0 </a></li> <li class=""><a href="/category/PYTHON" class="link_item"> PYTHON </a></li> <li class=""><a href="/category/SPRING" class="link_item"> SPRING </a></li> <li class=""><a href="/category/HADOOP" class="link_item"> HADOOP </a></li> <li class=""><a href="/category/SCALA" class="link_item"> SCALA </a></li> <li class=""><a href="/category/MONGODB" class="link_item"> MONGODB </a></li> <li class=""><a href="/category/REDIS" class="link_item"> REDIS </a></li> <li class=""><a href="/category/RUBY-ON-RAILS" class="link_item"> RUBY-ON-RAILS </a></li> <li class=""><a href="/category/SQL" class="link_item"> SQL </a></li> <li class=""><a href="/category/NODEJS" class="link_item"> NODEJS </a></li> <li class=""><a href="/category/JQUERY" class="link_item"> JQUERY </a></li> <li class=""><a href="/category/ANDROID" class="link_item"> ANDROID </a></li> <li class=""><a href="/category/SWIFT" class="link_item"> SWIFT </a></li> <li class=""><a href="/category/HTML" class="link_item"> HTML </a></li> <li class=""><a href="/category/CSS" class="link_item"> CSS </a></li> <li class=""><a href="/category/REACTJS" class="link_item"> REACTJS </a></li> <li class=""><a href="/category/VUEJS" class="link_item"> VUEJS </a></li> <li class=""><a href="/category/WORDPRESS" class="link_item"> WORDPRESS </a></li> <li class=""><a href="/category/ANGULAR" class="link_item"> ANGULAR </a></li> <li class=""><a href="/category/MICROSERVICE" class="link_item"> MICROSERVICE </a></li> <li class=""><a href="/category/DJANGO" class="link_item"> DJANGO </a></li> <li class=""><a href="/category/FLASK" class="link_item"> FLASK </a></li> <li class=""><a href="/category/APACHE" class="link_item"> APACHE </a></li> <li class=""><a href="/category/GO" class="link_item"> GO </a></li> <li class=""><a href="/category/JAVA" class="link_item"> JAVA </a></li> <li class=""><a href="/category/FLUTTER" class="link_item"> FLUTTER </a></li> <li class=""><a href="/category/REACTIVE" class="link_item"> REACTIVE </a></li> <li class=""><a href="/category/SPA" class="link_item"> SPA </a></li> </ul> </li> </ul> </div> <!-- 태그목록 모듈 --> <div class="widget widget-tag col-md-3 col-xs-12"> <h3><i class="icon-tag icons"></i> 태그목록</h3> <ul> <li><a href="/tag/PYTHON" class="cloud3"> PYTHON</a></li> <li><a href="/tag/java" class="cloud2"> java</a></li> <li><a href="/tag/spring-mvc" class="cloud4"> spring-mvc</a></li> <li><a href="/tag/HADOOP" class="cloud3"> HADOOP</a></li> <li><a href="/tag/sql" class="cloud2"> sql</a></li> <li><a href="/tag/javascript" class="cloud4"> javascript</a></li> <li><a href="/tag/jQuery" class="cloud4"> jQuery</a></li> <li><a href="/tag/php" class="cloud4"> php</a></li> <li><a href="/tag/spring" class="cloud1"> spring</a></li> <li><a href="/tag/mysql" class="cloud4"> mysql</a></li> </ul> </div> <!-- 최근 포스트 모듈 --> <div class="widget widget-post col-md-3 col-xs-12"> <h3><i class="icon-list icons"></i> 최근에 올라온 글 </h3> <ul> </ul> </div> </div> </div> </div><!-- container close --> </aside><!-- sidebar close --> <footer role="contentinfo"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 footer-menu"> <a href="https://cnpnote.tistory.com/tag"><i class="icon-tag icons"></i> </a> <a href="https://cnpnote.tistory.com/rss" onclick="window.open(this.href); return false"><i class="icon-feed icons"></i> </a> </div> <div class="col-xs-12 col-sm-12 col-md-12 footer-copyright text-right"> <a href="https://cnpnote.tistory.com/"> cnpnote</a>'s Blog is powered by <a href="http://daum.net" onclick="window.open(this.href); return false">Daumkakao</a> / Designed by <a href="http://ongal.tistory.com">CEOSEO</a> </div> </div> </div> </footer> <!-- jQuery --> <script src="https://tistory1.daumcdn.net/tistory/2840920/skin/images/jquery-1.11.0.min.js?_version_=1583344392"></script> <div class="#menubar menu_toolbar "> <h2 class="screen_out">티스토리툴바</h2> <div class="btn_tool"><button class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="2840920" data-url="https://cnpnote.tistory.com" data-device="web_pc"><strong class="txt_tool_id">복붙노트</strong><em class="txt_state">구독하기</em><span class="img_common_tistory ico_check_type1"></span></button></div></div> <div class="#menubar menu_toolbar "></div> <div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div> <iframe id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px" src="//cnpnote.tistory.com/api"></iframe> <!-- DragSearchHandler - START --> <script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script> <!-- DragSearchHandler - END --> <script type="text/javascript">(function($) { $(document).ready(function() { lightbox.options.fadeDuration = 200; lightbox.options.resizeDuration = 200; lightbox.options.wrapAround = false; lightbox.options.albumLabel = "%1 / %2"; }) })(tjQuery);</script> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-717c7b1234a0a46519d1483dc3db06322985d92c/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-717c7b1234a0a46519d1483dc3db06322985d92c/static/script/menubar.min.js"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"2840920-19409","customProps":{"userId":"0","blogId":"2840920","entryId":"19409","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"19409","categoryName":"JQUERY","categoryId":"381321","author":"3264508","image":"","plink":"/entry/JQUERY-%EC%B0%BD-load%EC%99%80-%EB%AC%B8%EC%84%9C-ready%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C","tags":["document-ready","javascript","jQuery"]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/polyfills-legacy.min.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>