로딩 j 지연시 $ (document) .load() 및 $ (document) .ready()의 순서

모든 코드를 변경하기 전에 필자는 필요한지 확인하려고합니다. 대부분 이러한 기능의

$(document).ready(function(){ do_something(); ...

는 JS 외부 문서에 포함 된 다른 기능에 의존 :

나는 준비() 함수에 여러 인라인 JS와 JQuery와 기능을 가지고 있습니다. 또한 외부 스타일 시트에 정의 된 클래스를 사용합니다. 전에 페이지가 완전히 렌더링

if (window.addEventListener) 
    window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent) 
    window.attachEvent("onload", downloadJSAtOnload); 
else window.onload = downloadJSAtOnload;

이런 식으로 모든 이미지를 포함한 :

지금 난 그냥 (구글 https://developers.google.com/speed/docs/best-practices/payload?hl=en#DeferLoadingJS 권장)이 연기되도록 내 외부 JS 및 CSS의 로딩을 변경 그것은 JS를로드하기 시작합니다.

잘 작동합니다. 그러나, 나는 그것이 왜 항상 의지하고 있는지 궁금합니다. onLoad 전에 $ (document) .ready()가 실행되지 않았습니까? $ (document) .ready가 실행될 때 필요한 함수가 정의되지 않을 위험이 있습니까?

그래서 모든 $ (document) .ready를 $ (document) .load()로 변경해야합니까? 아니면 적어도 일부는? 그렇다면 먼저 onLoad()가 먼저 실행됩니까? 외부 js (헤더에 정의 된) 또는 인라인 js를로드하는 것? 로드 준비를 변경하면 무엇이 손실됩니까? 예를 들어, 사용자가 요소를 클릭 할 때 이벤트가 요소에 첨부되지 않을 수도 있습니다.

Btw, jQuery API는 다른 코드를 실행할 때 문제가 발생하기 때문에 지연되지 않습니다. 전체 페이지가로드 된 후

$(window).load(function(){ 
dosomething(); 
});

는 그것은 JS를 실행하여

출처

2013-01-06 user984003

보십시오.

$(document).ready(function(){ 
dosomething(); 
});

은 그냥 DOM의 로딩 후에 JS를 실행하여

마십시오. 다음과 같이

출처

2013-08-27 07:24:09 Chunky

실행 순서는 다음과 같습니다

ready() 화재는 DOM (HTML)를 준비하고 스크립트가로드됩니다. 다른 모든 너무로드가 완료
load() 화재 : HTML, 스크립트, CSS, 이미지 일반적으로

, 기능은 시간에 의해로드되도록, 준비 및로드 핸들러 이외의 스크립트를 배치 그들은 전화 받기. 그런 다음 모든 이벤트 리스너를 준비된 핸들러 내에 유지하고 필요할 때마다 모든 함수를 호출하십시오.

높은 수준 JS 구조는 다음과 같습니다

jQuery를 도서관
플러그인/타사 스크립트
사용자 정의 스크립트
$(document).ready() DOM 이벤트를 수신 최소한의 JS 논리를 포장

출처

2015-12-14 22:37:16 Oriol

로딩 j 지연시 $ (document) .load() 및 $ (document) .ready()의 순서

답변

관련 문제