javascript - Loader before website fadein -

मेरे पास यह नमूना कोड है:

  & lt;! DOCTYPE html & gt; & LT; html & gt; & Lt; शीर्ष & gt; & Lt; title & gt; उदाहरण & lt; / title & gt; & Lt;! - यह अगला शायद आपकी मुख्य सीएसएस फ़ाइल में होगा, लेकिन उदाहरण के उद्देश्यों के लिए यहां इनलाइन दिखाया गया - & gt; & Lt; शैली प्रकार = "टेक्स्ट / सीएसएस" & gt; शरीर {/ * इसे निफ्टी फीड-इन प्रभाव के लिए छुपाएं * / डिस्प्ले: कोई नहीं; } & Lt; / style & gt; & Lt;! - गैर-JavaScript लोगों के लिए फ़ॉलबैक - & gt; & LT; नोस्क्रिप्ट & gt; & Lt; शैली प्रकार = "टेक्स्ट / सीएसएस" & gt; शरीर {/ * उपर्युक्त * / डिस्प्ले: ओवरराइड करके इसे पुनः प्रदर्शित करता है; ब्लॉक; } & Lt; / style & gt; & Lt; / noscript & gt; & Lt; / head & gt; & LT; बॉडी & gt; ... सामग्री ... & lt; script src = "jquery.js" & gt; & lt; / स्क्रिप्ट & gt; & LT; स्क्रिप्ट & gt; // यह संस्करण फ़ंक्शन * तुरंत चलाता है * (फ़ंक्शन ($) {$ (खिड़की)। लोड (फ़ंक्शन () {$ (document.body)। FadeIn (1000);});}) () jQuery; & Lt; / स्क्रिप्ट & gt; & Lt; / body & gt; & Lt; / html & gt;  

जैसा कि आप देख सकते हैं, वेबपेज तब तक इंतजार कर रहा है जब तक यह लोड नहीं होता है और फिर फ़ेड इन करता है। लेकिन कुछ मामलों में, कुछ उपयोगकर्ता धीमा इंटरनेट पर काम कर सकते हैं और वेबसाइट पर कुछ समय के लिए भ्रमित हो सकता है भार। मैंने jQuery या अन्य प्रीलोडर्स देखने की कोशिश की है लेकिन कोई भी मेरे कोड के साथ काम करने के लिए नहीं लग रहा है। उपयोगकर्ता को पता है कि वेबपृष्ठ वास्तव में लोड हो रहा है, इस कोड को मैं इस कोड में एक छोटा, केन्द्रित लोडिंग कैसे जोड़ सकता / सकती हूं?

इसके अलावा, यह एक ही वेबसाइट से संबंधित है, इसलिए मैं एक और प्रश्न पोस्ट नहीं करना चाहता था । मेरी पृष्ठभूमि इमेज अनियमित रूप से हर बार जब पृष्ठ पुनः लोड होता है तो बदलता रहता है। यह कोड है:

  & lt; स्क्रिप्ट & gt; $ (दस्तावेज़) .ready (फ़ंक्शन () {var upperLimit = 13; var randomNum = Math.floor ((Math.random (* * UpperLimit) + 1); $ ("# banner")। सीएसएस ("पृष्ठभूमि-छवि "," Url ('css / images / overlay.png'), url ('images / "+ randomNum +" .jpg') ")}); & Lt; / स्क्रिप्ट & gt;  

यह महान काम करता है अब, मैं सोच रहा था कि केवल छोटी सी चीज थी, मैं उस पृष्ठभूमि आईएमजी को कैसे बना सकता हूं? मैं इसे जोड़कर काम करने में प्रतीत नहीं कर सकता। FadeIn (1000); सीएसएस ("पृष्ठभूमि-छवि", "url ('css / images / overlay.png'), यूआरएल ('छवियाँ /')।

  $ (" # banner ")। + यादृच्छिक नाम + ".jpg ')")। फीडइन (1000);  

मैं कैसे इसे फीका कर सकता हूँ ताकि यह थोड़ा सा नीपर दिखता है?

आप लोडर तत्व के लिए कुछ एचटीएमएल को परिभाषित कर सकते हैं, फिर जब आप पेज में फीका पड़ जाते हैं, तो इसे फीका करें।

हालांकि वर्तमान में आप पृष्ठ के शरीर को छिपाते / लुप्त होते हैं

उदाहरण के लिए:

  & lt; body & gt; उदाहरण के लिए:  
 उदाहरण के लिए:  
 & Lt; div id = "लोडर" & gt; & lt; img src = "loading-image.png" & gt; & lt; / div & gt; & Lt; div id = "पेज-सामग्री" & gt; & Lt;! - यहां सामग्री - & gt; & Lt; / div & gt; & Lt; / body & gt;  

तब आप अपने कोड और जेएस को # page-content को संदर्भित करने के बजाय body को बदल सकते हैं।

यदि आप पृष्ठ को लुप्त हो रहे हैं, तो यह बैनर छवि क्यों नहीं हो पाती? मुझे लगता है कि आप इसे एक ही मैकेनिक में लपेट कर सकते हैं।