jQuery Mobile 스크립트를 비동기 적으로로드 하시겠습니까?

누구나 head.js를 사용하거나 다른 방법을 사용하여 비동기 적으로 스크립트를 동반 한 jQuery Mobile의 로딩을 구현하려 했습니까? 지금 당장 실험하고 있는데, 성능이 크게 향상되지만 탐색 (특히 해시 변경 이벤트 처리)이 중단 된 것 같습니다. 그래서 누군가가 자신의 경험을 공유 할 수 있는지 궁금합니다.jQuery Mobile 스크립트를 비동기 적으로로드 하시겠습니까?

업데이트 : hashchanged 이벤트의 문제가 다른 구성 요소로 인해 발생하는 것으로 나타났습니다. 따라서 jQM 및 기타 JavaScript 애셋의 비동기 로딩을 구현하면 안전하고 JS 패키지의로드 시간과 성능이 크게 향상됩니다. 나는 그것을하기 위해 head.js를 사용합니다. 당신에게 가장 잘 맞는 것은 무엇이든 사용할 수 있습니다.

출처

2012-03-14 Alex Avrutin

는 [그] (https://gist.github.com/1231586) 같은 것을 시도 적이 있습니까? – neoascetic

아니요,하지 않았습니다. 그러나 최근 버전의 jQM은 Require.Js를 지원합니다. –

자바 스크립트를 페이지에로드 할 때 비동기 속성을 사용합니다. 그러나 이것은이 정확히 RequireJS 같은 패키지가 무엇이며이 링크

http://www.w3schools.com/tags/att_script_async.asp

출처

2012-04-30 09:56:51 Humayoo

몇 가지 스크립트를 특정 순서로로드해야합니다. head.js를 사용하면로드 순서를 제어 할 수 있지만 async 속성은 제어 할 수 없습니다. –

죄송하지만 저항 할 수 없었습니다. w3schools 및 그들이하고있는 피해에 대해 더 잘 교육하십시오. http://w3fools.com/ – kodeart

를 참조하십시오 단지 현대 브라우저에 대한 자세한 내용은 (HTML5 인)에서 지원합니다. RequireJS와 같은 모듈 로더를 사용하면 여러 JS 파일을 비동기 적으로로드하고 파일로드시 콜백을 정의 할 수 있습니다.

여기 ...

대신하여 jQuery를, 및/또는 기타 JS 파일을로드하는 간단한 예제로드 할 수있는 유일한 <script>은 RequireJS 스크립트입니다.

<script data-main="js/app" src="js/require.js"></script>

data-main 속성은 RequireJS의 구성 설정이 포함 /js/app.js에서 파일을로드 할 RequireJS를 알려줍니다. 여기에 /js/app.js의 예 :이 경우

requirejs.config({ 
    "baseUrl": "js/lib", 
    "paths": { 
     "app": "../app", 
     "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min", 
     "jqueryMobile": "//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min" 
    } 
}); 

// Load the main app module to start the app 
requirejs(["app/main"]);

이 /js/app.js는 경로를 구성하는 데 주로 사용된다. app 속성은 RequireJS에게 특정 앱 JS를 찾을 곳을 알려주고 jquery 속성은 RequireJS에 jQuery 용 Google CDN URL의 경로를 알려줍니다. 마지막으로 requirejs() 메소드를 사용하여 파일 .js을로드하십시오. 모든 경로는 .js을 벗어나지 않습니다.

이 시점에서 RequireJS는 app JS를 app/main.js에서 찾을 것입니다. 에 main.js이라는 파일을 작성하십시오. 이제 /js/app/main.js 파일이 있습니다.

이 파일은 비동기 적으로 Google CDN에서 jQuery 및 jQuery Mobile 파일을로드하고 나머지 앱 로직을 포함합니다. 다음은 /js/app/main.js의 예입니다.

define(["jquery", "jqueryMobile"], function($) { 
    //jQuery and jQuery Mobile have been loaded. 
    $(function() { 
     // Do stuff with jQuery and jQuery Mobile 
    }); 
});

어떤 영향이 있습니까? 이제 파일을로드하는 방법을 보려면 네트워크 폭포를 살펴 보자 :

는

위의 그림은 비동기 모두 jQuery를 및 jQuery를 모바일 로딩을 보여줍니다.

비슷한 데모는 RequireJS jQuery example을 참조하십시오.

출처

2016-02-02 07:18:25

나는 당신이 사용할 수있는 것 같아요 :

그것은 트리거 할 수 있습니다

var script = document.createElement('script'); 
script.onload = function() { 
    alert("Script loaded and ready"); 
}; 

script.src = "http://whatever.com/the/script.js"; 
document.getElementsByTagName('head')[0].appendChild(script);

하지만 당신이 원하는 이벤트입니다.

여기를 찾았습니다 document.createElement("script") synchronously

출처

2016-09-30 04:22:58

jQuery Mobile 스크립트를 비동기 적으로로드 하시겠습니까?

답변

관련 문제