Trang của tôi mất khá nhiều thời gian để tải nhiều loại điều khiển và hình ảnh menu khác nhau. Tôi muốn hiển thị một cửa sổ popup với thanh tiến trình trên đó. Người dùng không được truy cập trang gốc trên trình duyệt web khi cửa sổ bật lên này hiển thị.Khóa màn hình bằng cửa sổ bật lên cho đến khi trang thời gian được tải hoàn toàn
Khi trang đã tải hoàn toàn, cửa sổ bật lên này phải biến mất. làm như thế nào?
Cách dễ nhất để thực hiện việc này là với lớp phủ - một vị trí tuyệt đối <div> bao phủ toàn bộ trang và có độ cao z-index. Khi trang của bạn đã tải xong (tức là vụ cháy sự kiện loaded), bạn có thể xóa <div>.
Một ví dụ thô cho các mục đích phong cách:
<html>
<head>
<style type="text/css">
#loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.7; }
#loading-message { position: absolute; width: 400px; height: 100px; line-height: 100px; background-color: #fff; text-align: center; font-size: 1.2em; left: 50%; top: 50%; margin-left: -200px; margin-top: -50px; }
</style>
</head>
<body>
<div id="loading-overlay"></div>
<div id="loading-message">Loading page, please wait...</div>
<!-- rest of page -->
<p>The rest of the page goes here...</p>
</body>
</html>
Hãy nhận biết rằng điều khiển có thể có của chính họ "nạp" sự kiện (ví dụ <img> thẻ nào), có thể bắn sau khi trang đã hoàn toàn kết thúc. Bạn sẽ phải thử nghiệm để chắc chắn.
Bạn có thể có một div bao phủ toàn bộ màn hình và trong trình xử lý window.load ẩn phần tử đó, nhưng tôi đồng ý với nhận xét ở trên. Đừng làm điều đó với người dùng của bạn.
Đây là một tùy chỉnh một Tôi đã sử dụng trên một trong những ứng dụng tùy chỉnh đám mây của tôi: NGEN Preload Screen
Xem nguồn cho hành động body.onload ...
Hãy sử dụng nó tại giải trí của bạn ...
Ergh ... Bạn có nhận ra mình đang cố gắng làm gì với người dùng của mình không? (humph, xin lỗi, nhưng không thể cưỡng lại được: Tôi sẽ không quay lại trang web nào!) –
Điều gì sẽ xảy ra nếu kết nối đến một hình ảnh nhỏ không thành công? Toàn bộ trang sẽ không thể sử dụng được vì hình ảnh nhỏ bé này. – Gumbo
Martin, tôi đoán có điều gì đó ngu ngốc về phía tôi. Bạn có thể đề nghị cách tiếp cận tốt nhất? – RKh