Khi nào các trình duyệt bắt đầu hiển thị HTML được truyền một phần?

Tôi có một báo cáo dài hạn và muốn hiển thị trình quay số chờ cho người dùng trong khi tạo báo cáo. Tôi đã thực hiện công việc này nhưng tôi không chắc chắn tôi đang làm điều đó một cách tốt nhất hay đúng đắn.Khi nào các trình duyệt bắt đầu hiển thị HTML được truyền một phần?

Điều này đang sử dụng ColdFusion nhưng có thể là bất kỳ ngôn ngữ nào tôi đoán. Ở trên cùng của trang, tôi có một số Javascript (jQuery) cho thấy một chờ đợi-spinner cộng với có một handReady xử lý, nơi tôi có spinner xuống. Tôi xóa đầu ra (nếu nó quan trọng) và sau đó phần còn lại của mã hoạt động trên nội dung báo cáo. Điều này đã không bao giờ render spinner và tôi giả định rằng, mặc dù tôi đã xả những thứ trên máy chủ, một số đệm đã xảy ra trên đường đi và trình duyệt không bao giờ thấy mã spinner cho đến khi quá muộn. Vì vậy, tôi đã thêm một vòng lặp ngay trước khi tôi xóa sạch nhổ ra một vài trăm dòng nhận xét HTML. Sau khi tinh chỉnh số lượng các dòng, đã làm các trick. Tôi cho rằng đó là cách các trang web khác cũng vậy.

Nhưng: Hôm nay, trong khi xem một trang khác của tôi phát ra một dòng theo trạng thái đường của một công việc dài, tôi thấy rằng trang đó tuôn ra sau mỗi dòng và trình duyệt hiển thị từng bước như mong muốn. Điều này không phù hợp với kết luận của tôi từ trên cao và bây giờ tôi không biết các quy tắc là gì. Có cách nào dự đoán được để thực hiện việc này không? Nó có thay đổi theo trình duyệt không?

KIỂM TRA: Tôi đánh giá cao các câu trả lời cố gắng giải thích đúng cách để thực hiện công cụ chờ đợi nhưng tôi chỉ sử dụng máy quay chờ làm ví dụ để minh họa câu hỏi thực của mình: có cách đáng tin cậy để dự đoán khi trình duyệt sẽ bắt đầu hiển thị HTML khi nó được truyền trực tiếp tới chúng qua mạng? Rõ ràng là thông qua quan sát rằng các trình duyệt không chờ thẻ/html bắt đầu hoạt động. Câu hỏi này không nhất thiết phải liên quan đến Javascript. Ví dụ, trang thứ hai tôi mô tả rằng trạng thái hiển thị là HTML thuần túy.

Nguồn

2010-02-04 DaveBurns

Nếu tôi hiểu chính xác bạn đang tải một trình quay vào DOM bằng jQuery trước khi sự kiện sẵn sàng tài liệu đã được kích hoạt? Tôi không biết nếu đó là liên quan đến vấn đề của bạn, nhưng đó không phải là những gì bạn muốn làm. Và đây có phải là cuộc gọi ajax mà bạn đang thực hiện không? Có vẻ như bạn đang thử thực hiện chức năng AJAX (tải DOM bằng chỉ báo chờ, thực hiện cuộc gọi AJAX để tải báo cáo, thay thế chỉ báo chờ báo cáo khi được tải), nhưng không sử dụng AJAX. –

Không có cuộc gọi AJAX nào. Có jQuery nội tuyến đơn giản để hiển thị spinner. Phần còn lại của trang là dữ liệu báo cáo thực tế. Điều này làm việc tốt. Tại sao đây không phải là điều tôi muốn làm? Nếu tôi có thể làm cho nó hoạt động, nó có vẻ đơn giản hơn nhiều sau đó chia trang thành hai phần - bit ban đầu cộng với báo cáo được trả về thông qua AJAX. – DaveBurns

--- bài giảng rõ trả lời ---

câu trả lời ban đầu của tôi nên có ích cho một ai đó (Tôi hy vọng), nhưng nó không phải là một câu trả lời trực tiếp cho câu hỏi, vì vậy tôi sẽ đăng khác answer

Câu trả lời cho câu hỏi đã được đặt lại của bạn là "không". Trong trường hợp FF, có độ trễ hiển thị ban đầu được xác định trước, nhưng các trình duyệt khác sẽ khác nhau. Điều đó làm chậm trễ FF render có thể được tinh chỉnh là tốt.

Sử dụng FF làm ví dụ, 250ms ban đầu đó là thời gian để FF tìm ra ít nhất một số thông tin hữu ích trước khi thử lần hiển thị đầu tiên. Sau đó, nó sẽ hiển thị thêm theo định kỳ khi nó tìm hiểu thêm.

Không có cách nào để bạn xác định thời điểm trình duyệt bắt đầu hiển thị tài liệu HTML.

--- Original trả lời ---

Để trực tiếp trả lời câu hỏi của bạn, tôi tin rằng Firefox đợi 250ms trước khi hành động trên dữ liệu đầu tiên nhận được, nhưng điều đó có thể thay đổi. Đối với các trình duyệt khác, tôi không biết.

Tuy nhiên, bạn không muốn đi tuyến đường đó.

Khi jQuery sẵn sàng hoạt động ma thuật, nó sẽ cho bạn biết bằng cách bắn $(document).ready(). Trước đó, mọi nỗ lực sử dụng jQuery sẽ thất bại. Nói cách khác, spinner của bạn không hiển thị vì jQuery chưa sẵn sàng xử lý yêu cầu đó.

Hãy xem ví dụ sau, nơi hai trình giữ chỗ được hiển thị trên màn hình và chúng tôi sẽ sử dụng jQuery để ẩn chúng.

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
     <script> 

      // We're not ready yet. This will fail. 
      $(".placeholder").hide(); 

      $(document).ready(function(){ 
       // This won't fail 
       $("#one").hide(); 
      }); 

     </script> 
    </head> 
    <body> 
     <div id="one" class="placeholder">Placeholder One</div> 
     <div id="two" class="placeholder">Placeholder Two</div> 
    </body> 
</html>

Có thể xuất hiện đầu tiên là $("#one").hide(); là thừa, nhưng điều đó không đúng. $(".placeholder").hide(); được gọi trước khi jQuery sẵn sàng, vì vậy nó không có hiệu lực, đó là lý do tại sao bạn sẽ thấy "Placeholder Two" hiển thị (và không phải "Placeholder One") nếu bạn chạy đánh dấu ở trên trong một trình duyệt web.

Bây giờ chúng ta có cách này, giải pháp cho vấn đề lớn hơn ("đúng cách") là AJAX.

Tải trang cơ sở chứa mã spinner. Đảm bảo mã để nạp spinner chạy như một phần của $(document).ready().
Sử dụng jQuery's AJAX functionality để nhận báo cáo bạn muốn.
Khi quay lại, hãy ẩn trình quay, đưa báo cáo vào trang cơ sở của bạn.

Chúc may mắn!

Nguồn

2010-02-05 07:13:19

E-man - Bạn lấy số 250ms ở đâu? Bạn là người thứ hai nói rằng những gì tôi đang làm không phải là điều tôi muốn làm. Được rôi nhưng tại sao? Nó có đáng tin cậy không? Đây là một ứng dụng trong nhà, nơi sử dụng FF là bắt buộc vì vậy tôi không lo lắng về các trình duyệt khác (nhưng cũng muốn biết điều đó). Tôi nhận thức được cách tiếp cận AJAX nhưng đã cố gắng tránh sự phức tạp thêm. Về ví dụ của bạn - Tôi nghĩ rằng bạn đang nói rằng ẩn ban đầu() sẽ không hoạt động vì jQuery chưa sẵn sàng nhưng mã hiện tại của tôi hoạt động tốt và làm như vậy bằng cách gọi jQuery trước khi document.ready kích hoạt. Tui bỏ lỡ điều gì vậy? – DaveBurns

Đối với 250ms http://hackaday.com/2004/12/26/speed-up-firefox/ Bạn không thể sử dụng jQuery trước $ (tài liệu) .ready() fire-- Tôi nghĩ vòng lặp nhận xét của bạn là buộc một "ok một cái gì đó bị đình trệ, chúng ta hãy lấy những gì chúng tôi đã có cho bây giờ" tình hình trong FF (đoán tốt nhất). Nó không phải là bình thường, tôi chắc chắn về điều đó. Tôi sẽ trả lời câu hỏi được nhắc lại trong Câu trả lời khác. –

Đây chỉ là sai lầm mà bạn không thể sử dụng jQuery trước khi '.ready()' được gọi. Bạn không thể đảm bảo rằng mọi phần tử trong tài liệu đều có sẵn khi thực hiện cuộc gọi trước các trình kích hoạt '.ready()', nhưng nhiều phần tử có thể tồn tại. Đặc biệt, nếu bạn đặt một thẻ script vào trong cơ thể HTML của bạn, thì tất cả phần tử trước thẻ script sẽ an toàn để sử dụng mặc dù '.ready()' ha chưa được kích hoạt. – jfriend00

Tôi hy vọng nó sẽ khác nhau tùy theo trình duyệt: một số sẽ bắt đầu hiển thị trước khi trang được nhận hoàn toàn; những người khác sẽ chờ cho toàn bộ tệp html trước khi bắt đầu.

Tôi lưu ý rằng đặc tả Phản hồi HTTP cung cấp tiêu đề "Nội dung một phần 206", có thể cung cấp một số hy vọng cho giải pháp trình duyệt chéo đáng xem xét.

Có gần như chắc chắn một số cách để cắt nó, nhưng ý tưởng trước mắt của tôi sẽ là cung cấp trang gốc, sau đó sử dụng ajax để kéo và hiển thị các đoạn theo yêu cầu. ví dụ: rất nhiều trang web lớn dường như đang cung cấp chế độ xem tối thiểu bắt đầu, sau đó nếu bạn cuộn xuống đủ, nó sẽ kích hoạt yêu cầu ajax để truy xuất thêm dữ liệu và thêm vào trang. ví dụ: facebook, slashdot.

Tôi không thể tưởng tượng điều này quá khó thực hiện; ngay cả với coldfusion. Bạn khởi động spinner khi bạn kích hoạt yêu cầu ajax và dừng nó khi gọi lại được gọi.

Nguồn

2010-02-05 00:32:58

Đối với hậu thế: suy đoán về '206 Nội dung một phần' là không chính xác. Mã phản hồi này chỉ được sử dụng để trả lời các yêu cầu phạm vi HTTP - tức là yêu cầu một phần tài nguyên, chẳng hạn như tìm kiếm trong luồng âm thanh/video hoặc quá trình tải xuống được tiếp tục. – duskwuff

Nếu tôi hiểu chính xác bạn, bạn muốn một "tải" hình ảnh hiển thị trong khi trang vẫn tải nội dung.

Những gì tôi làm và những gì tôi tin là cách tốt nhất là thêm thẻ div ở đầu trang của bạn, gần thẻ body giữ hình ảnh/văn bản tải. Bạn có thể đặt div này ở nơi khác với sự giúp đỡ của một số css.

Sau đó, có Jquery xóa div này khi trang được tải. Thay vì sử dụng $ (tài liệu) .ready như một số đã đề nghị tôi sẽ sử dụng $ (cửa sổ) .load thay vào đó, vì nó được kích hoạt khi trang đầy đủ được tải, bao gồm tất cả khung, đối tượng và hình ảnh.
Se liên kết tại đây; http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Ví dụ;

<body>  
<div id="loading" style="z-index:200; width:100%; height:40px; border-top:2px #D4D4D4 solid; background:#E8E8E8; color:#000; position:fixed; bottom:0; left:0;"> 
    <div align="center"> 
     <img src="load.gif" alt="Loading..."> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(window).load(function() { $("#loading").remove(); }); 
</script> 
[...]

...

Nguồn

2010-02-05 09:22:52 jamietelin

khác hơn so với xây dựng trong chậm trễ cho Firefox, có những lĩnh vực khác mà làm cho trình duyệt phải đợi trước khi render.

Khi trang html được gửi tới trình duyệt, trước tiên, trang này phải quyết định mọi thứ diễn ra trước khi nó có thể vẽ màn hình. Ví dụ: các bảng có tiếng là gây ra sự chậm trễ hiển thị. Để vẽ bảng, trình duyệt cần tính kích thước cột. Nếu bạn sử dụng tỷ lệ phần trăm làm chiều rộng cột hoặc không chỉ định chúng, thì trình duyệt phải lấy toàn bộ bảng trước khi hiển thị.

Tuy nhiên, nếu bạn sử dụng một cái gì đó như thuộc tính css thì trình duyệt chỉ có thể đọc hàng đầu tiên và bắt đầu vẽ khi dữ liệu được cung cấp cho nó.

Các thẻ khác có thể gây ra sự cố tương tự. Về cơ bản, bất cứ khi nào trình duyệt phải tính toán kích thước của nội dung, thì nó phải có tất cả nội dung để hiển thị. Nếu bạn có thể đưa ra gợi ý trước thời hạn thông qua việc sử dụng các phần tử kích thước cố định (chiều rộng/chiều cao) thì trình duyệt không cần tìm ra bất kỳ thứ gì và có thể vẽ các phần tử khi chúng được tải xuống.

Là quy tắc tự áp đặt, tôi không bao giờ để trình duyệt xác định bất cứ điều gì. Thay vào đó tôi cung cấp cho các yếu tố của tôi kích thước cố định. Kết quả là các trang web tôi làm việc thường có kết xuất nhanh.

Nguồn

2010-02-08 05:49:19 NotMe

Khi nào các trình duyệt bắt đầu hiển thị HTML được truyền một phần?

Trả lời

Các vấn đề liên quan