Làm cách nào để hiển thị hộp thoại jquery trước khi toàn bộ trang được tải?

Trên trang web của tôi, một số thao tác có thể mất nhiều thời gian để hoàn thành.Làm cách nào để hiển thị hộp thoại jquery trước khi toàn bộ trang được tải?

Khi tôi biết một trang sẽ mất chút thời gian để tải, tôi muốn hiển thị chỉ báo tiến trình trong khi trang đang tải.

Lý tưởng nhất là tôi muốn nói điều gì đó dọc theo dòng:

$("#dialog").show("progress.php");

và có phủ lên trên cùng của trang đang được nạp (biến mất sau khi hoạt động được hoàn thành).

Mã hóa thanh tiến trình và hiển thị tiến trình không phải là vấn đề, sự cố đang nhận được chỉ báo tiến trình bật lên KHI trang đang được tải. Tôi đã cố gắng sử dụng hộp thoại của JQuery cho điều này nhưng chúng chỉ xuất hiện sau khi trang đã được tải.

Điều này phải là một vấn đề phổ biến nhưng tôi không đủ quen thuộc với JavaScript để biết cách tốt nhất để làm điều này.

Đây là ví dụ đơn giản để minh họa sự cố. Mã bên dưới không hiển thị hộp thoại trước khi tạm dừng 20 giây. Tôi đã thử trong Chrome và Firefox. Trong thực tế, tôi thậm chí không thấy văn bản "Vui lòng đợi ...".

Dưới đây là đoạn code tôi đang sử dụng:

<html> 
    <head> 
     <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script> 

    </head> 
    <body> 
    <div id="please-wait">My Dialog</div> 
    <script type="text/javascript"> 
     $("#please-wait").dialog(); 
    </script> 
    <?php 
    flush(); 
    echo "Waiting..."; 
    sleep(20); 
    ?> 
    </body> 
</html>

Nguồn

2009-03-26 Oleg Barshay

Bạn sẽ cần phải chạy mà đoạn mã ngay lập tức sau khi bạn < body>, một cái gì đó như:

<html> 
    <head> 
    </head> 
    <body> 
    <div id="please-wait"></div> 
    <script type="text/javascript"> 
     // Use your favourite dialog plugin here. 
     $("#please-wait").dialog(); 
    </script> 
    .... 
    </body> 
</html>

Lưu ý tôi bỏ qua $ (function() {}) truyền thống bởi vì bạn cần nó được tải ngay khi trang được hiển thị, không phải sau khi toàn bộ DOM được tải.

Tôi đã thực hiện việc này trước đây và hoạt động tốt, ngay cả khi trang chưa tải xong.

CHỈNH SỬA: bạn sẽ phải chắc chắn rằng plugin hộp thoại jQuery bạn đang sử dụng đang tải trước khi tải toàn bộ số lượng DOM của bạn xuống. Thường thì đây không phải là trường hợp, bạn sẽ không hoạt động. Trong trường hợp đó, bạn sẽ cần phải sử dụng giải pháp JavaScript đơn giản g'old, chẳng hạn như Lightbox 1 hoặc Lightbox 2.

Nguồn

2009-03-26 22:33:37 Seb

+1 Câu trả lời hay. Đánh bại tôi với nó :) Lưu ý: kịch bản jQuery sẽ phải được tải trước khi mã này thực hiện (rõ ràng) –

Đúng vậy, tốt Josh. Một khi tệp jquery.js được lưu trữ cục bộ, nó sẽ chỉ là một phần nghìn giây mặc dù :) – Seb

Có vẻ như nó sẽ hoạt động nhưng khi tôi thử nó cục bộ (Chrome và Firefox thông qua Apache), hộp thoại sẽ không xuất hiện trước khi tải trang. Tôi sẽ gửi mã mẫu trong câu hỏi ban đầu của tôi ở trên. –

Làm cách nào để hiển thị hộp thoại jquery trước khi toàn bộ trang được tải?

Trả lời

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