पृष्ठ को देखने से पहले jQuery/जावास्क्रिप्ट को प्रीलोड करें और चलाएं

Question

मैं एक ऐसे प्रोजेक्ट पर काम कर रहा हूं जहां बहुत सारे jQuery चल रहे हैं। तो जब मैं पेज पर जाता हूं, तो मैं देख सकता हूं कि jQuery चल रहा है (उदाहरण के लिए $.button() पृष्ठ पर तत्व अभी भी jQueryUI लोड होने से पहले सामान्य HTML तत्व के रूप में दिखाई देते हैं: एस) तो शुरू में यह सभी बदसूरत लग रहा है, एक बार सभी जेएस लोड हो जाने पर और निष्पादित, यह "अच्छा" लग रहा है।

यह केवल छवियों को प्रीलोड करने का कोई मामला नहीं है या जो भी हो, मैं jQuery कोड को चालू करना चाहता हूं, लेकिन इसे आगंतुकों से "छुपाएं" ताकि एक बार पृष्ठ खोला जा सके, यह सीधे "अच्छा" दिखता है या एक ब्लैक स्क्रीन प्रदर्शित करता है कह रहा है कि "लोड हो रहा है ..." जब तक कि jQuery चलाना समाप्त नहीं हो जाता है।

यहां एक नज़र डालें: http://www.filamentgroup.com/, हालांकि मुझे यकीन नहीं है कि वास्तव में इसे प्रदर्शित करने से पहले साइट की जावास्क्रिप्ट चलाता है, लेकिन यह "अंधेरे स्क्रीन" कहने का मूल विचार दिखाता है "लोड हो रहा है ..." .. मुझे संदेह है कि क्या इस तरह के SlideRocket के रूप में बड़े वेब एप्लिकेशन में होता है, हालांकि यह उपयोग फ्लैश ... करता है: एस

Answer 1

आप सवाल अपने आप को जवाब खिड़की भार के साथ अपने सीएसएस

#everything-wrapper { 
    display : none; 
} 

में किसी से प्रदर्शन सेट और फिर। किसी प्रकार की लोडिंग स्क्रीन है जो पृष्ठ को छुपाती है जब तक कि सभी jQuery चलें।

निम्न की तरह कुछ आज़माएं।

यह आपके पेज के शीर्ष पर चला जाता है:

<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div> 

यहाँ अपने jQuery है:

$(document).ready(function() { 

    /* 
    * ... all of your jQuery ... 
    */ 

    // At the bottom of your jQuery code, put this: 
    $('#loadingMask').fadeOut(); 
}); 

Answer 2

लपेटें अपने jQuery के सभी कि आप चाहते हैं "प्रीलोडेड" इस में:

$(window).load(function() { 
    //Your jQuery here 
}); 

या वैकल्पिक रूप से, नहीं के सभी उस jQuery के अंदर आपका jQuery कोड। बल्कि, डाल अपने jQuery डोम एक

$(document).ready(function(){ 
    //jQuery 
})) 

में बदल जाता है और फिर अपने सभी साइट सामग्री के लिए एक आवरण है।

<div id="everything-wrapper"> 
    <!-- put your body here --> 
</div> 

और जैसे पहले

$(window).load(function() { 
    $("#everything-wrapper").show(); 
    // or 
    $("#everything-wrapper").fadeIn("fast"); 
    // to be fancy with it 
}); 

Answer 3

मैं के माध्यम से, तो जब JQuery भार अपने स्थिर सीएसएस और HTML के हिस्से के रूप में एक ओवरले के लिए होता है

$(document).ready() आप ओवरले

Answer 4

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

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

Answer 5

दोस्त, मैंने आपको नमूना बनाया था। मुझे आशा है कि आपको पसंद आएगा। मैं अपनी साइट पर ऐसा कुछ उपयोग करता हूं। http://jsfiddle.net/jMVVf/

Answer 6

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