एक jquery स्क्रिप्ट में देरी करना जब तक कि बाकी सब लोड न हो जाए


111

मेरे पास एक jquery स्क्रिप्ट है जिसे मुझे पृष्ठ पर केवल एक बार और सब कुछ चलाने की आवश्यकता है, जिसमें कुछ अन्य javascripts (जिन पर मेरा कोई नियंत्रण नहीं है) ने अपनी बात पूरी कर ली है।

हालांकि मैं शायद $ (दस्तावेज़) के लिए एक विकल्प था। पहले से ही लेकिन मैं इसे खोजने में सक्षम नहीं था।

जवाबों:


217

आप $(document).ready()एक पृष्ठ में कई बार हो सकते हैं । जिस क्रम में यह दिखाई देता है उस कोड को चलाया जाता है।

आप $(window).load()अपने कोड के लिए ईवेंट का उपयोग कर सकते हैं क्योंकि पेज के पूरी तरह से लोड होने के बाद ऐसा होता है और विभिन्न $(document).ready()हैंडलर में सभी कोड समाप्त हो गए हैं।

$(window).load(function(){
  //your code here
});

1
क्या मैं इस पद्धति का उपयोग करके बाहरी स्क्रिप्ट आयात कर सकता हूं?
13

1
यकीन है, अगर आप पहले से ही $ (दस्तावेज़) के अंदर ऐसा कर रहे हैं। पहले से ही (), यह अलग नहीं होगा।
जोस बेसिलियो

7
यह उत्तर मेरे लिए उपयोगी था क्योंकि मुझे पता नहीं था कि अनुक्रम में
जक्वेरी

1
आपको बहुत - बहुत धन्यवाद! यह मेरी .height () समस्या को ठीक करता है जहां इसे सही ऊंचाई नहीं मिल रही थी क्योंकि पृष्ठ (जाहिरा तौर पर) अभी तक लोड नहीं किया गया था।
जॉन

6
JQuery 3.0 में, आपको सिंटैक्स का उपयोग $(window).on('load', function() { });$ (विंडो) .load () से हटा दिया गया है।
एलेक्स एच।

13

यह कोड ब्लॉक मेरी समस्या को हल करता है,

<script type="text/javascript">
  $(window).bind("load", function () {
    // Code here
  });
</script>


JQuery पहले से लोड है या नहीं यह देखने के लिए आप jQuery फ़ंक्शन कैसे चला सकते हैं? यह तभी काम करेगा जब jQuery ने चेकिंग से पहले लोड किया हो।
हेल्प नाइनर

11

$(document).ready()पृष्ठ पर शीर्ष क्रम में एकाधिक आग लग जाएगी। आखिरी $(document).ready()पेज पर आखिरी फायर करेगा। आखिरी के अंदर $(document).ready(), आप सभी अन्य लोगों के बाद फायर करने के लिए एक नई कस्टम घटना को ट्रिगर कर सकते हैं।

नए कस्टम इवेंट के लिए किसी ईवेंट हैंडलर में अपना कोड लपेटें।

<html>
<head>
<script>
    $(document).on("my-event-afterLastDocumentReady", function () {
        // Fires LAST
    });
    $(document).ready(function() {
        // Fires FIRST
    });
    $(document).ready(function() {
        // Fires SECOND
    });
    $(document).ready(function() {
        // Fires THIRD
    });
</script>
<body>
... other code, scripts, etc....
</body>
</html>

<script>
    $(document).ready(function() {
        // Fires FOURTH
        // This event will fire after all the other $(document).ready() functions have completed.
        // Usefull when your script is at the top of the page, but you need it run last
        $(document).trigger("my-event-afterLastDocumentReady");
    });
</script>

3

से यहाँ :

// Add jQuery 
var GM_JQ = document.createElement('script'); 
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(GM_JQ); 

// Check if jQuery's loaded 
function GM_wait() 
{ 
    if(typeof unsafeWindow.jQuery == 'undefined') 
    { 
        window.setTimeout(GM_wait,100); 
    } 
    else 
    { 
        $ = unsafeWindow.jQuery; 
        letsJQuery(); 
    } 
} 

GM_wait(); 

// All your GM code must be inside this function 
function letsJQuery() 
{
    // Do your jQuery stuff in here    
} 

इसका उपयोग करने के लिए jQuery लोड होने तक यह प्रतीक्षा करेगा, लेकिन आप उसी अवधारणा का उपयोग कर सकते हैं, अपनी अन्य लिपियों में चर सेट कर सकते हैं (या यदि वे आपकी स्क्रिप्ट नहीं हैं तो उनकी जाँच कर सकते हैं) जब तक कि वे उनका उपयोग करने के लिए लोड न हों।

उदाहरण के लिए, अपनी साइट पर, मैं एसिंक्रोनस JS लोडिंग के लिए इसका उपयोग करता हूं और जब तक वे jQuery का उपयोग करके उनके साथ कुछ भी करने से पहले समाप्त नहीं हो जाते तब तक प्रतीक्षा करते हैं:

<script type="text/javascript" language="JavaScript"> 
    function js(url){
        s = document.createElement("script");
        s.type = "text/javascript";
        s.src = url;
        document.getElementsByTagName("head")[0].appendChild(s);
    }       

    js("/js/jquery-ui.js");
    js("/js/jrails.js");
    js("/js/jquery.jgrowl-min.js");
    js("/js/jquery.scrollTo-min.js");
    js("/js/jquery.corner-min.js");
    js("/js/jquery.cookie-min.js");
    js("/js/application-min.js");

    function JS_wait() {
        if (typeof $.cookie == 'undefined' || // set in jquery.cookie-min.js
            typeof getLastViewedAnchor == 'undefined' || // set in application-min.js
            typeof getLastViewedArchive == 'undefined' || // set in application-min.js 
            typeof getAntiSpamValue == 'undefined') // set in application-min.js
        { 
            window.setTimeout(JS_wait, 100); 
        }
        else 
        { 
            JS_ready(); 
        }
    }

    function JS_ready() {
        // snipped
    };

    $(document).ready(JS_wait);
</script> 

यह केवल तब तक इंतजार करेगा जब तक कि jQuery लोड न हो जाए और पृष्ठ के अन्य पहलुओं की उपेक्षा न हो। यह चिकनाई के पुराने संस्करणों के लिए एक हैक से ज्यादा कुछ नहीं है जो @require निर्देश का समर्थन नहीं करता है।
Cheekysoft

1
मैंने अपने कोड को एक उदाहरण के रूप में जोड़ा है कि मैंने jQuery के साथ एक ही अवधारणा का उपयोग कैसे किया जब तक कि अन्य कोड लोड न हो।
11:11 पर क्रिस डोगेट

1

यह पता चलता है कि जावास्क्रिप्ट फ्रेमवर्क के एक अजीब मिश्रण की वजह से, जो मुझे उस घटना श्रोता का उपयोग करके स्क्रिप्ट को आरंभ करने के लिए आवश्यक था जो अन्य फ्रेमवर्क में से एक प्रदान करता है।


3
खुशी है कि आपने एक समाधान पाया लेकिन आपका उत्तर अधिक विवरण के बिना दूसरों के लिए उपयोगी नहीं है ...
एंड्रयू

1

क्या आपने $().readyjQuery फ़ंक्शन को चलाने की कोशिश करते हुए सभी आरंभिक कार्यों को लोड करने की कोशिश की है , जो आप चाहते थे?

शायद आप setTimeout()उस $().readyफ़ंक्शन पर उपयोग कर सकते हैं जिसे आप चलाना चाहते थे, जिस कार्यक्षमता को आप लोड करना चाहते थे।

या, setInterval()यह देखने के लिए कि क्या अन्य सभी लोड कार्य पूरे हो चुके हैं (बूलियन वैरिएबल में स्थिति को संग्रहीत करें) का उपयोग करें और अंतराल की जाँच करें। जब शर्तें पूरी हो जाती हैं, तो आप अंतराल को रद्द कर सकते हैं और लोड फ़ंक्शन चला सकते हैं।


मुझे यकीन नहीं है कि आप इसका क्या मतलब है। क्या आप सुझाव दे रहे हैं कि मैं एक स्क्रिप्ट के माध्यम से सभी लिपियों को आयात करूं और अपनी स्क्रिप्ट को अंतिम रूप दूं? यदि ऐसा है तो वह कैसा दिखेगा (मैं एक डिजाइनर हूँ व्यापार द्वारा, इसलिए बड़े शब्दों का उपयोग न करें :))
Chrism

$ (दस्तावेज़)। पहले से ही (फ़ंक्शन () {callLoadFunction1 (); callLoadFunction2 (); calljQueryLoadFunction ();});
रिचर्ड क्लेटन

अन्य स्क्रिप्ट सभी बाहरी फाइलें हैं इसलिए मुझे यकीन नहीं है कि यह काम करेगा?
करिश्मा

@chrism: मेरा दूसरा उदाहरण देखें। यह तब तक इंतजार करता है जब तक कि चर सेट नहीं हो जाते हैं और यह इंगित करता है कि अन्य बाहरी जेएस फाइलें कुछ भी करने से पहले लोड की गई हैं। आप बस उस कोड को डाल सकते हैं जिसे आप मेरे JS_ready () विधि में चलाना चाहते हैं। यह वही करता है जो आप खोज रहे हैं।
क्रिस डोगेट

2
बस उपयोग$(window).load(function(){...})
रयान टेलर
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.