ऐसा करने का सबसे आसान तरीका ओवरले के साथ होगा - एक पूरी तरह से स्थित <div>
जो पूरे पृष्ठ को कवर करता है और इसमें उच्च z-index
है। एक बार आपका पृष्ठ लोड हो गया है (यानी loaded
ईवेंट आग) तो आप <div>
को हटा सकते हैं।
स्टाइल प्रयोजनों के लिए मोटे तौर पर उदाहरण:
<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>
जागरूक नियंत्रण अपने स्वयं के "लोड" घटना (जैसे <img>
टैग करते हैं), जो पृष्ठ के बाद पूरी तरह से समाप्त नहीं है आग सकता है हो सकता है हो सकता है। आपको निश्चित होने के लिए प्रयोग करना होगा।
Ergh ... क्या आपको पता है कि आप अपने उपयोगकर्ताओं के साथ क्या करने का प्रयास कर रहे हैं? (humph, क्षमा करें, लेकिन विरोध नहीं कर सका: मैं उस वेबसाइट पर वापस नहीं आऊंगा जो ऐसा करता है!) –
क्या होगा यदि एक छोटी छवि का कनेक्शन विफल हो जाए? इस छोटे से छवि के कारण पूरा पृष्ठ उपयोग योग्य नहीं होगा। – Gumbo
मार्टिन, मुझे लगता है कि मेरे हिस्से पर कुछ मूर्खतापूर्ण है। क्या आप सबसे अच्छा दृष्टिकोण सुझा सकते हैं? – RKh