$가 사용 가능하게 될 때까지 기능 지연

Question

Yahoo는 성능상의 이유로 load scripts at the bottom of an HTML pages에게 제안합니다. 규칙을 존중하는 HTML5 상용구를 사용합니다.

이 접근법의 문제점은 jQuery가 맨 아래에로드된다는 것입니다. 웬일인지 $이 네임 스페이스에서 아직 사용할 수 없기 때문에 jQuery 코드가 포함 된 인라인 자바 스크립트를 작성해야하는 경우에는 할 수 없습니다.

이이 마크 업을 요구하는 galleria.js와 예 (jQuery를 이미지 갤러리 엔진)에 대한 발생합니다

<div id="gallery"> 
    <img src="/media/img1.png" /> 
    <img src="/media/img2.png" /> 
</div> 

<script> 
$('#gallery').css('height', '200px'); // this is required for galleria to work 
Galleria.run('#gallery'); 
</script> 

코드는 jQuery를 나중에로드되는 때문에 작동하지 않습니다 #gallery의 높이를 설정할 수 있습니다. 파이어 버그 콘솔을 제공합니다

ReferenceError: $ is not defined 

$ 기호까지 <script> 블록의 실행을 posticipate하는 모든 힌트는 네임 스페이스에서 찾을 수 있습니까?

Answer 1

스크립트를 함수로 래핑하고 jQuery를로드 한 후 실행되는 스크립트 내에서 호출 할 수 있습니다.

Answer 2

가능한 경우 HEAD에 jQuery를 배치하십시오. 이는 매우 일반적인 라이브러리이므로 허용됩니다. 그러나 분명히 jquery 스크립트 다음에 오는 스크립트 블록을 이동하는 것 이외에 하나의 옵션이 있습니다. window.setTimeout (function() {... jQuery code ...}, 2000); ... 앞에서 언급 한 내용은 제 의견으로는 밴드 쉐이드입니다. 모범 사례는 아닙니다.

참고 : 우리는 사용자가 2 초 내에 jQuery를로드 할 것이라고 "추측"하므로이 작업은 완전히 신뢰할 수 없습니다. 물론 시간 제한을 길게 만들 수 있습니다. 그러나 사용자의 속도 (/ 나이)와 대역폭의 모든 것이 타이밍에 영향을 미칩니다. 그것은 예측할 수 없다.

Answer 3

하단의 jQuery <script> 태그를 그대로두고 Galleria <script> 바로 아래로 이동하십시오.

<script type="text/javascript" src="jquery.js"></script> 
<script> 
$('#gallery').css('height', '200px'); // this is required for galleria to work 
Galleria.run('#gallery'); 
</script> 

Answer 4

'준비 검사기'를 직접 만들 수 있습니다. 문서가 준비하고 jQuery를도 문서의 하단에 자신을하면로드 될 때까지 기다릴 수

<script> 
    var id = window.setInterval(function(){ 

     if(document.readyState != 'complete') return; 

     //onload code here 

     window.clearInterval(id); 
    }, 10); 
</script> 

이 방법.