Quá trình tải xuống trong HTML5

Question

Nếu tôi có 5 tệp javascript và mỗi kích thước khác nhau và giống với CSS, có thể hiển thị thanh tiến trình "thời gian thực" khi tập lệnh/css tải xuống không?

Tôi biết điều này không thể thực hiện được trong HTML4 và sẽ yêu cầu Flash/Silverlight. Nhưng tôi có thể đạt được điều này trong HTML5 không? Nếu có, tôi sẽ làm như thế nào?

Tôi muốn hiển thị văn bản như "Tải xuống" và khi mỗi tập lệnh/css tải xuống thời gian thực, mỗi thư Tải xuống sẽ bắt đầu được điền. Tôi không yêu cầu bất kỳ mã nào. Chỉ muốn có một khái niệm cấp cao về điều đó là có thể.

Cảm ơn.

Answer 1

Đây là những gì tôi đã có thể đưa ra; Trong HTML5, có một phần tử <progress> mà bạn có thể sử dụng. Tin xấu là hỗ trợ cho yếu tố này không phải là tốt như nó có thể được. Xem biểu đồ hỗ trợ tại đây: http://caniuse.com/#search=progress Không có hỗ trợ trong Safari 5 trở xuống hoặc IE9 trở xuống. Hỗ trợ một phần là trong IE10 và mọi phiên bản có liên quan của FireFox. Nếu bạn cần hỗ trợ nhiều hơn thử một polyfil như thế này một: http://lea.verou.me/polyfills/progress/

Nếu bạn chọn sử dụng các yếu tố <progress> đây là một liên kết về làm thế nào để định dạng: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

Bây giờ lừa về làm công việc này, bạn sẽ cần biết kích thước tệp của (các) tệp bạn sẽ tải xuống và số lượng byte đã tải xuống. Khi các tệp đang được tải xuống, bạn sẽ phải nhận thông tin tiêu đề cho bạn biết số lượng byte được chuyển. Bạn có thể xem ví dụ về cách thực hiện điều đó với jQuery tại đây: http://markmail.org/message/kmrpk7w3h56tidxs#query:jquery%20ajax%20download%20progress+page:1+mid:kmrpk7w3h56tidxs+state:results

Lưu ý rằng phương pháp này sẽ không hoạt động với IE. IE không phơi bày dữ liệu tiêu đề của đối tượng XHR.

Tại thời điểm này thiết lập các thuộc tính max của phần tử <progress> với tổng kích thước tập tin và sử dụng setTimeout mẫu, cập nhật value thuộc tính của phần tử <progress>.

Biết tất cả điều này, có thể tìm một số loại giải pháp gói với dự phòng Flash tích hợp có thể dễ thực hiện hơn nhiều và có hỗ trợ tốt hơn. Có ai khác có ý tưởng không?

Chúc may mắn.