Tải kịch bản jQuery Mobile không đồng bộ?

Question

Có ai đã cố gắng triển khai tải jQuery Mobile với các tập lệnh đi kèm không đồng bộ với sự trợ giúp của head.js hoặc sử dụng phương pháp khác không? Tôi đang thử nghiệm với nó ngay bây giờ, và trong khi nó cung cấp cho một tăng hiệu suất rất lớn, nó dường như phá vỡ chuyển hướng (đặc biệt là xử lý sự kiện hashchanged). Vì vậy, tôi tự hỏi nếu ai đó có thể chia sẻ kinh nghiệm của mình với nó.

CẬP NHẬT: Vấn đề với sự kiện hashchanged hóa ra là do một thành phần khác gây ra. Vì vậy, thực hiện tải async không hợp lệ của jQM và các tài sản JavaScript khác của bạn, an toàn và cải thiện rất nhiều thời gian tải và hiệu suất của ứng dụng JS của bạn. Tôi sử dụng head.js để thực hiện điều đó, bạn có thể sử dụng bất cứ thứ gì phù hợp nhất với bạn.

Answer 1

sử dụng thuộc tính Không đồng bộ khi tải tập lệnh java vào trang. nhưng điều này sẽ chỉ hỗ trợ trong trình duyệt hiện đại (Html5) cho chi tiết Xin vui lòng xem liên kết này

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

Answer 2

Đây là chính xác những gì một gói như RequireJS là cho. Sử dụng bộ nạp mô-đun như RequireJS cho phép bạn tải không đồng bộ nhiều tệp JS và xác định các lần gọi lại khi các tệp được tải.

Dưới đây là một ví dụ đơn giản ...

Thay vì tải jQuery, và/hoặc các tập tin JS khác của bạn, chỉ <script> để tải là kịch bản RequireJS.

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

Các data-main thuộc tính nói RequireJS để tải file tại /js/app.js, trong đó có thiết lập RequireJS cấu hình của bạn. Dưới đây là ví dụ về /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"]); 

Trong trường hợp này, /js/app.js được sử dụng chủ yếu để định cấu hình đường dẫn. Thuộc tính app yêu cầu RequireJS tìm kiếm ứng dụng JS cụ thể của bạn và thuộc tính jquery yêu cầu RequireJS đường dẫn đến URL CDN của Google cho jQuery. Cuối cùng, sử dụng phương thức requirejs() để tải ứng dụng của bạn .js tệp. Lưu ý rằng tất cả các đường dẫn rời khỏi .js.

Tại thời điểm này RequireJS sẽ tìm kiếm app JS của bạn tại app/main.js. Tạo tệp trong /js/app/ có tên main.js - vì vậy, bây giờ bạn có tệp /js/app/main.js.

Tệp này sẽ tải cả tệp jQuery và jQuery Mobile từ CDN của Google, không đồng bộ và chứa phần còn lại của logic ứng dụng của bạn. Dưới đây là ví dụ về /js/app/main.js:

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

Hiệu ứng này có tác dụng gì? Chúng ta hãy nhìn vào thác mạng để xem cách các tập tin được tải:

Sơ đồ trên cho thấy cả hai jQuery và jQuery Mobile tải không đồng bộ.

Để có bản trình diễn tương tự, hãy xem RequireJS jQuery example.

Answer 3

Tôi đoán bạn có thể sử dụng:

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); 

Nó có thể được kích hoạt nhưng sự kiện mà bạn muốn.

Tìm thấy nó ở đây: document.createElement("script") synchronously