($ (दस्तावेज़) .ready () ’के गैर- jQuery के बराबर क्या है?

Question

गैर- jQuery के बराबर क्या है $(document).ready()?

Comments

यदि आप $(document).ready()किसी भी पुस्तकालय का उपयोग किए बिना jQuery की घटना को पुन: उत्पन्न करना चाहते हैं , तो इस पर एक नज़र डालें: stackoverflow.com/questions/1795089/…

— CMS

@OP: वेनिला जावास्क्रिप्ट के कार्यान्वयन के लिए प्रो जावास्क्रिप्ट तकनीकों के पेज 89 की जाँच करें $(document).ready()- books.google.com/… । यह addEventडीन एडवर्ड्स द्वारा लिखित ईवेंट बाइंडिंग एब्स्ट्रैक्शन का भी उपयोग करता है , जिसका कोड भी किताब में है :)

— रसम कैम

$ डॉक्युमेंट

— Qantas 94 हैवी

Answer 1

इसके बारे $(document).ready()में अच्छी बात यह है कि यह पहले आग लगाता है window.onload। लोड फ़ंक्शन तब तक इंतजार करता है जब तक कि सब कुछ लोड न हो जाए, जिसमें बाहरी संपत्ति और छवियां शामिल हैं। $(document).readyहालाँकि, DOM ट्री पूरा होने पर आग लग जाती है और उसमें हेरफेर किया जा सकता है। यदि आप jQuery के बिना, DOM को तैयार करना चाहते हैं, तो आप इस लाइब्रेरी में देख सकते हैं। किसी ने readyjQuery से सिर्फ एक हिस्सा निकाला । इसका अच्छा और छोटा और आपको यह उपयोगी लग सकता है:

पहले से ही Google कोड पर

Comments

डोमरी कोड नेटवर्क! gitub पर @CMS के माध्यम से: github.com/cms/domready/network

— Kzqai

यह प्रश्न का उत्तर नहीं देता है और न ही यह कोई गैर-jQuery कोड दिखाता है। यह इतने सारे अपवित्र कैसे हुए?

— डैनियल डब्ल्यू।

@DanielW। क्योंकि यह सरल और व्यावहारिक है। हम में से अधिकांश यह सुनिश्चित करने के लिए एक रास्ता ढूंढने के लिए यहाँ आए थे कि जावास्क्रिप्ट कोड द्वारा उपयोग किए जाने के लिए DOM तैयार है।

— अबराज़ल

हाँ, लेकिन हम में से कुछ यहाँ एक वास्तविक जवाब के लिए आए थे।

— स्लैक्स

Answer 2

यह पूरी तरह से, ECMA से काम करता है

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

window.onloadJQuery के बराबर नहीं है $(document).readyक्योंकि $(document).readyकेवल डोम पेड़ से इंतजार करता है, जबकि window.onloadबाहरी संपत्ति और छवियों सहित सभी तत्वों की जाँच करें।

संपादित करें : जन Derk के अवलोकन के लिए IE8 और पुराने समकक्ष जोड़ा गया । आप इस लिंक पर एमडीएन पर इस कोड का स्रोत पढ़ सकते हैं :

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}

इसके अलावा अन्य विकल्प भी हैं "interactive"। देखें MDN जानकारी के लिए लिंक।

Comments

बेंजामिन से सहमत। आप बस संलग्नक का उपयोग नहीं कर सकते। जैसे क्रोम में आपको मिलता है: अनकैप्ड टाइपर्रर: document.attachEvent एक फंक्शन नहीं है। Jan Derk द्वारा लिंक किए गए उत्तर का उपयोग करें।

— मैनुअल आर्म्ड श्मिट

यदि इस स्क्रिप्ट को कहा जाता है, तो दस्तावेज़ पहले ही लोड हो गया है तो क्या होगा? कुछ भी नहीं होगा :(

— oriadam

@ डायरलॉपर नोप, बस इसे क्रोम कंसोल पर आज़माया - कुछ नहीं हुआ: document.addEventListener("DOMContentLoaded",function(){console.log(123)})इसे अभी आज़माएं

— oriadam

ब्राउज़रों में DOMContentLaded का समर्थन : caniuse.com/domcontentloaded

— Guillaume Husta

@elliottregan यह सच है कि मैं इस थ्रेड को प्रदूषित करने से बचने के लिए टिप्पणी को हटाता हूं, मेरा सुझाव है कि आप सभी ऐसा ही करते हैं :) और यदि आवश्यक हो तो टिप्पणी को इंगित करने के लिए एक टिप्पणी दें। चूँकि यह एक अतिरिक्त है क्योंकि यह OC प्रश्नों से परे है

— sospedra

Answer 3

एक छोटी सी बात मैंने साथ रखी

domready.js

(function(exports, d) {
  function domReady(fn, context) {

    function onReady(event) {
      d.removeEventListener("DOMContentLoaded", onReady);
      fn.call(context || exports, event);
    }

    function onReadyIe(event) {
      if (d.readyState === "complete") {
        d.detachEvent("onreadystatechange", onReadyIe);
        fn.call(context || exports, event);
      }
    }

    d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
    d.attachEvent      && d.attachEvent("onreadystatechange", onReadyIe);
  }

  exports.domReady = domReady;
})(window, document);

इसका इस्तेमाल कैसे करें

<script src="domready.js"></script>
<script>
  domReady(function(event) {
    alert("dom is ready!");
  });
</script>

आप उस संदर्भ को भी बदल सकते हैं जिसमें कॉलबैक एक दूसरे तर्क को पारित करके चलता है

function init(event) {
  alert("check the console");
  this.log(event);
}

domReady(init, console);

Comments

धन्यवाद। मुझे यह तथ्य पसंद है कि यह पिछड़ा संगत है। आगे बढ़ने का मतलब सिर्फ कम भाग्यशाली लोगों को पीछे छोड़ना नहीं है। आधुनिक ब्राउज़र का उपयोग न कर पाना (जो भी कारण हो) दुर्भाग्यपूर्ण है ...

— CO

Answer 4

अब जब कि यह 2018 यहां एक त्वरित और सरल विधि है।

यह एक ईवेंट श्रोता जोड़ देगा, लेकिन अगर यह पहले से ही निकाल दिया गया है कि हम जाँच करेंगे कि डोम एक तैयार अवस्था में है या यह पूरा हो गया है। यह उप-संसाधनों को लोड करने से पहले या बाद में आग लगा सकता है (चित्र, स्टाइलशीट, फ्रेम, आदि)।

function domReady(fn) {
  // If we're early to the party
  document.addEventListener("DOMContentLoaded", fn);
  // If late; I mean on time.
  if (document.readyState === "interactive" || document.readyState === "complete" ) {
    fn();
  }
}

domReady(() => console.log("DOM is ready, come and get it!"));

अतिरिक्त रीडिंग

• https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
  • जाँच करना कि क्या लोडिंग पहले से पूरी है
• https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

---

अपडेट करें

यहाँ मानक ES6 आयात और निर्यात का उपयोग कर कुछ त्वरित उपयोगिता हेल्पर्स मैंने लिखा है कि टाइपस्क्रिप्ट भी शामिल हैं। शायद मैं इन्हें एक त्वरित पुस्तकालय बनाने के लिए प्राप्त कर सकता हूं जो एक निर्भरता के रूप में परियोजनाओं में स्थापित किया जा सकता है।

जावास्क्रिप्ट

export const domReady = (callBack) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

टाइपप्रति

export const domReady = (callBack: () => void) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack: () => void) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

वादे

export const domReady = new Promise(resolve => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', resolve);
  }
  else {
    resolve();
  }
});

export const windowReady = new Promise(resolve => {
  if (document.readyState === 'complete') {
    resolve();
  }
  else {
    window.addEventListener('load', resolve);
  }
});

Answer 5

Http://youmightnotneedjquery.com/#ready के अनुसार एक अच्छा प्रतिस्थापन जो अभी भी IE8 के साथ काम करता है

function ready(fn) {
  if (document.readyState != 'loading') {
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

// test
window.ready(function() {
    alert('it works');
});

सुधार : व्यक्तिगत रूप से मैं यह भी जांच करूंगा कि क्या प्रकार fnएक फ़ंक्शन है। और @elliottregan के रूप में ने सुझाव दिया कि उपयोग के बाद ईवेंट श्रोता को हटा दें।

इस प्रश्न का उत्तर देर से देने की वजह यह है कि मैं इस उत्तर की खोज कर रहा था, लेकिन यहां नहीं मिला। और मुझे लगता है कि यह सबसे अच्छा उपाय है।

Comments

हां, यह मेरी राय में सबसे अच्छा जवाब है। पढ़ने में आसान है, और यह तब भी कोड निष्पादित करता है, जब डोम पहले से लोड है। केवल एक चीज जो मैं जोड़ूंगा, वह यह है कि ईवेंट को निकाल दिए जाने के बाद ईवेंटलिस्ट को हटा दिया जाए।

— इलियट्रेगन

Answer 6

एक मानक आधारित प्रतिस्थापन है, DOMContentLoaded जो 90% से अधिक ब्राउज़रों द्वारा समर्थित है, लेकिन IE8 (ब्राउज़र समर्थन के लिए JQuery द्वारा कोड उपयोग के नीचे नहीं) :

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

jQuery का मूल कार्य केवल window.onload की तुलना में बहुत अधिक जटिल है, जैसा कि नीचे दर्शाया गया है।

function bindReady(){
    if ( readyBound ) return;
    readyBound = true;

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", function(){
            document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
            jQuery.ready();
        }, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", arguments.callee );
                jQuery.ready();
            }
        });

        // If IE and not an iframe
        // continually check to see if the document is ready
        if ( document.documentElement.doScroll && window == window.top ) (function(){
            if ( jQuery.isReady ) return;

            try {
                // If IE is used, use the trick by Diego Perini
                // http://javascript.nwbox.com/IEContentLoaded/
                document.documentElement.doScroll("left");
            } catch( error ) {
                setTimeout( arguments.callee, 0 );
                return;
            }

            // and execute any waiting functions
            jQuery.ready();
        })();
    }

    // A fallback to window.onload, that will always work
    jQuery.event.add( window, "load", jQuery.ready );
}

Comments

नए jQuery ने पुराने ब्राउज़रों के लिए समर्थन को गिरा दिया और अब उनके पास केवल DOMContentLoadedऔर loadउपयोग करने वाली घटनाएं हैं addEventListener, और पहले कि आग दोनों श्रोताओं को हटा देती है, इसलिए यह दो बार फायर नहीं करती है।

— jcubic 12

Answer 7

सादे वेनिला जावास्क्रिप्ट में, कोई पुस्तकालयों के साथ? यह एक त्रुटि है।$केवल एक पहचानकर्ता है, और जब तक आप इसे परिभाषित नहीं करते, अपरिभाषित है।

jQuery परिभाषित करता है $क्योंकि यह "सब कुछ ऑब्जेक्ट" है (यह भी जाना जाता है jQueryताकि आप इसे अन्य पुस्तकालयों के साथ विरोध किए बिना उपयोग कर सकें)। यदि आप jQuery (या इसे परिभाषित करने वाले कुछ अन्य पुस्तकालय) का उपयोग नहीं कर रहे हैं, तो$ परिभाषित नहीं किया जाएगा।

या आप पूछ रहे हैं कि समतल जावास्क्रिप्ट में समतुल्य क्या है? उस मामले में, आप शायद चाहते हैं window.onload, जो बिल्कुल बराबर नहीं है, लेकिन वेनिला जावास्क्रिप्ट में समान प्रभाव के करीब पहुंचने का सबसे तेज और आसान तरीका है।

Comments

इस उत्तर के कई डाउनवॉटर्स (और नीचे के अन्य) के लिए: जब यह सवाल पूछा गया था, तो उसने बस इतना कहा: "जावास्क्रिप्ट में $ (दस्तावेज़) (पहले से ही) क्या है? नहीं jquery? यह क्या है?" यह लग रहा था जैसे वह पूछ रहा था कि सादे वेनिला जावास्क्रिप्ट में इसका मतलब है कि कोई jQuery लोड नहीं है। मेरे उत्तर में, मैंने उस प्रश्न का उत्तर देने का प्रयास किया, साथ ही सादे जेनिफर जावास्क्रिप्ट के लिए निकटतम आसान उत्तर भी दिया जिसमें कोई jQuery या अन्य पुस्तकालयों के मामले में नहीं था कि उसका क्या मतलब था। ध्यान दें कि सभी अतिरिक्त संदर्भ अन्य लोगों द्वारा यह अनुमान लगाने पर जोड़े गए थे कि प्रश्न क्या पूछ रहा था, मूल पोस्टर नहीं।

— ब्रायन कैंपबेल

Answer 8

हाल के ब्राउज़रों में सबसे आसान तरीका उपयुक्त GlobalEventHandlers , onDOMContentLoaded , onload , onloadeddata (...) का उपयोग करना होगा।

onDOMContentLoaded = (function(){ console.log("DOM ready!") })()

onload = (function(){ console.log("Page fully loaded!") })()

onloadeddata = (function(){ console.log("Data loaded!") })()

DOMContentLoaded ईवेंट को निकाल दिया जाता है जब प्रारंभिक HTML दस्तावेज़ को लोड करने के लिए स्टाइलशीट, चित्र और सबफ़्रेम की प्रतीक्षा किए बिना पूरी तरह से लोड और पार्स किया गया है। एक पूरी तरह से लोड किए गए पृष्ठ का पता लगाने के लिए एक बहुत अलग घटना लोड का उपयोग किया जाना चाहिए। यह लोड का उपयोग करने के लिए एक अविश्वसनीय रूप से लोकप्रिय गलती है जहां DOMContentLoaded बहुत अधिक उपयुक्त होगी, इसलिए सतर्क रहें।

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

उपयोग किया गया फ़ंक्शन एक IIFE है, इस मामले पर बहुत उपयोगी है, क्योंकि यह तैयार होने पर खुद को ट्रिगर करता है:

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

यह स्पष्ट रूप से किसी भी स्क्रिप्ट के अंत में रखने के लिए अधिक उपयुक्त है।

ES6 में, हम इसे एरो फंक्शन के रूप में भी लिख सकते हैं:

onload = (() => { console.log("ES6 page fully loaded!") })()

DOM तत्वों का उपयोग करने के लिए सबसे अच्छा है, हम किसी भी वैरिएबल के तैयार होने की प्रतीक्षा कर सकते हैं, जो एक तीर वाले IIFE को ट्रिगर करता है।

व्यवहार समान होगा, लेकिन कम स्मृति प्रभाव के साथ।

footer = (() => { console.log("Footer loaded!") })()

<div id="footer">

कई मामलों में, तैयार होने पर दस्तावेज़ ऑब्जेक्ट भी ट्रिगर हो रहा है , कम से कम मेरे ब्राउज़र में। तब सिंटैक्स बहुत अच्छा है, लेकिन इसे कॉम्पिटिशन के बारे में और परीक्षण की आवश्यकता है।

document=(()=>{    /*Ready*/   })()

Comments

DOM से लोडिंग तत्वों को समाप्त करने से पहले IIFE ट्रिगर हो सकता है?

— CTS_AE

ज़रूर, यह सिर्फ एक फ़ंक्शन है, एक अनाम फ़ंक्शन, एक बंद में।

— 21

Answer 9

शरीर पर एक विकल्प भी हो सकता है:

<html>
<head><title>Body onLoad Exmaple</title>

<script type="text/javascript">
    function window_onload() {
        //do something
    }
</script>

</head>
<body onLoad="window_onload()">

</body>
</html>