Tôi làm cách nào để có được tiến trình tải xuống <script>?

Question

Ví dụ: tôi đang tạo trò chơi. Tôi có một kịch bản nhỏ có công việc là để tải tất cả các tài sản và trình bày một thanh tiến trình cho người dùng trong khi tải tài sản.

Một nội dung như vậy là một tập lệnh khá lớn chứa logic trò chơi. Có lẽ lên tới 3 MB.

Tôi làm cách nào để hiển thị tiến độ tải của tập lệnh thứ hai cho người dùng?

Answer 1

<script> thẻ chỉ kích hoạt load và error sự kiện; họ không bắn progress sự kiện. Tuy nhiên, trong các trình duyệt hiện đại, Ajax requests do support progress events. Bạn có thể tải nội dung kịch bản của bạn và theo dõi sự tiến bộ qua Ajax, và sau đó đặt các nội dung kịch bản vào một yếu tố mới <script> khi tải hoàn thành:

var req = new XMLHttpRequest(); 

// report progress events 
req.addEventListener("progress", function(event) { 
    if (event.lengthComputable) { 
     var percentComplete = event.loaded/event.total; 
     // ... 
    } else { 
     // Unable to compute progress information since the total size is unknown 
    } 
}, false); 

// load responseText into a new script element 
req.addEventListener("load", function(event) { 
    var e = event.target; 
    var s = document.createElement("script"); 
    s.innerHTML = e.responseText; 
    // or: s[s.innerText!=undefined?"innerText":"textContent"] = e.responseText 
    document.documentElement.appendChild(s); 

    s.addEventListener("load", function() { 
     // this runs after the new script has been executed... 
    }); 
}, false); 

req.open("GET", "foo.js"); 
req.send(); 

Đối với các trình duyệt cũ không hỗ trợ Ajax progress, bạn có thể xây dựng của bạn giao diện người dùng báo cáo tiến độ chỉ hiển thị thanh tải sau sự kiện progress đầu tiên (hoặc nếu không, hiển thị một spinner chung nếu không có progress sự kiện nào xảy ra).

Answer 2

Bạn có thể muốn có một cái nhìn tại How to show loading status in percentage for ajax response?

Đó là để xem tình trạng của một download AJAX. Vì bạn đang tải một tập lệnh, nó có thể không phải là cách tốt nhất để lấy tệp nhưng nó có thể hoạt động. Sau đó, bạn sẽ cần phải đặt nội dung nhận được bởi cuộc gọi ajax ở đâu đó để thực hiện, và eval không được khuyến khích.