2009-12-15 12 views
5

मेरा पृष्ठ विभिन्न नियंत्रण और मेनू छवियों को लोड करने में काफी समय लगता है। मैं उस पर प्रगति पट्टी के साथ एक पॉपअप विंडो दिखाना चाहता हूँ। यह पॉपअप दिखाए जाने पर उपयोगकर्ता वेब ब्राउज़र पर मूल पृष्ठ तक पहुंचने में सक्षम नहीं होना चाहिए।स्क्रीन को लॉक के साथ लॉक करें जब तक कि पेज पूरी तरह से लोड न हो जाए

जब पृष्ठ पूरी तरह से लोड हो गया है, तो यह पॉपअप गायब हो जाना चाहिए। यह कैसे करना है?

+6

Ergh ... क्या आपको पता है कि आप अपने उपयोगकर्ताओं के साथ क्या करने का प्रयास कर रहे हैं? (humph, क्षमा करें, लेकिन विरोध नहीं कर सका: मैं उस वेबसाइट पर वापस नहीं आऊंगा जो ऐसा करता है!) –

+1

क्या होगा यदि एक छोटी छवि का कनेक्शन विफल हो जाए? इस छोटे से छवि के कारण पूरा पृष्ठ उपयोग योग्य नहीं होगा। – Gumbo

+0

मार्टिन, मुझे लगता है कि मेरे हिस्से पर कुछ मूर्खतापूर्ण है। क्या आप सबसे अच्छा दृष्टिकोण सुझा सकते हैं? – RKh

उत्तर

9

ऐसा करने का सबसे आसान तरीका ओवरले के साथ होगा - एक पूरी तरह से स्थित <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> टैग करते हैं), जो पृष्ठ के बाद पूरी तरह से समाप्त नहीं है आग सकता है हो सकता है हो सकता है। आपको निश्चित होने के लिए प्रयोग करना होगा।

1

आपके पास एक डिवी हो सकती है जो पूरी स्क्रीन को और खिड़की में रखती है। लोड हैंडलर उस तत्व को छुपाता है, लेकिन मैं उपर्युक्त टिप्पणी से सहमत हूं। अपने उपयोगकर्ताओं को ऐसा मत करो।

2

यह एक कस्टम एक मैं अपने कस्टम बादल अनुप्रयोगों में से एक पर उपयोग किया है है: NGEN Preload Screen

देखें body.onload कार्रवाई के लिए स्रोत ...

अपने खाली समय में इसका इस्तेमाल करने के लिए स्वतंत्र महसूस ...

संबंधित मुद्दे