जावास्क्रिप्ट - कैसे पता लगाया जाए कि दस्तावेज़ लोड किया गया है (आईई 7 / फ़ायरफ़ॉक्स 3)

Question

मैं दस्तावेज़ लोड होने के बाद एक फ़ंक्शन को कॉल करना चाहता हूं, लेकिन दस्तावेज़ अभी तक लोडिंग समाप्त हो सकता है या नहीं हो सकता है। यदि इसने लोड किया, तो मैं केवल फ़ंक्शन को कॉल कर सकता हूं। यदि यह लोड नहीं हुआ, तो मैं एक घटना श्रोता को संलग्न कर सकता हूं। मैं पहले से ही निकाल दिया गया है के बाद से एक आयोजक जोड़ नहीं सकते क्योंकि यह नहीं कहा जाएगा। अगर दस्तावेज़ लोड हो गया है तो मैं कैसे जांच सकता हूं? मैंने नीचे दिए गए कोड की कोशिश की, लेकिन यह पूरी तरह से काम नहीं करता है। कोई विचार?

var body = document.getElementsByTagName('BODY')[0];
// CONDITION DOES NOT WORK
if (body && body.readyState == 'loaded') {
    DoStuffFunction();
} else {
    // CODE BELOW WORKS
    if (window.addEventListener) {  
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload', DoStuffFunction);
    }
}

Comments

"मैं दस्तावेज़ लोड होने के बाद एक फ़ंक्शन को कॉल करना चाहता हूं, लेकिन दस्तावेज़ अभी तक लोडिंग समाप्त हो सकता है या नहीं हो सकता है।" यह गणना नहीं करता है।

— रिचर्ड सिमेस

मेरा मानना ​​है कि उसका मतलब है कि जब उसका ब्लॉक ऑफ ब्लॉक शुरू हो जाता है तो उसका नियंत्रण नहीं होता है, लेकिन यह सुनिश्चित करना चाहता है कि डॉक्यूमेंट लोड होने से पहले DoStuffFunction () को न बुलाया जाए।

— बेन ब्लैंक

Answer 1

Galambalazs द्वारा उल्लिखित सभी कोड की कोई आवश्यकता नहीं है। शुद्ध जावास्क्रिप्ट में इसे करने के लिए क्रॉस-ब्राउज़र तरीका बस परीक्षण करना है document.readyState:

if (document.readyState === "complete") { init(); }

यह भी है कि jQuery कैसे करता है।

जावास्क्रिप्ट लोड होने के आधार पर, यह एक अंतराल के अंदर किया जा सकता है:

var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        init();
    }
}, 10);

वास्तव में, document.readyStateतीन राज्य हो सकते हैं:

"लोड हो रहा है" लौटाता है जबकि दस्तावेज़ लोड हो रहा है, "इंटरएक्टिव" एक बार यह पार्सिंग समाप्त हो गया है लेकिन अभी भी लोड हो रहा है उप-संसाधन, और "पूरा" एक बार लोड होने के बाद। - Mozilla डेवलपर नेटवर्क पर document.readyState

इसलिए अगर आपको केवल DOM तैयार करने की आवश्यकता है, तो जांच लें document.readyState === "interactive"। यदि आपको चित्रों सहित, पूरे पृष्ठ को तैयार होने की आवश्यकता है, तो जांच लें document.readyState === "complete"।

Comments

@ कोस्टा, अगर document.readyState == "complete", इसका मतलब है कि छवियों सहित सब कुछ लोड किया गया है।

— लौरेंट

मैं दोनों घटनाओं के संयोजन का उपयोग कर रहा हूं और document.readyStateयह सुनिश्चित करने के लिए कि डोम को पार्स किया गया है या बाद में, जब यह कहा गया है, इसके आधार पर फ़ंक्शन शुरू होता है। इंटरैक्टिव के लिए एक घटना है readyState?

— टॉम ज़ातो -

मैं उपयोग करूंगा /loaded|complete/.test(document.readyState)। कुछ ब्राउज़र document.readyState"पूर्ण" के बजाय "लोड" पर सेट होते हैं। इसके अलावा, document.readyState यह सुनिश्चित नहीं करता है कि फोंट लोड किए गए हैं, बिना प्लगइन के परीक्षण के लिए कोई वास्तविक अच्छा तरीका नहीं है।

— रयान टेलर

किस बारे में document.onreadystatechange? यदि ब्राउज़र इसका समर्थन करता है तो यह अधिक सुव्यवस्थित लगता है। stackoverflow.com/questions/807878/…

मुझे लगता है document.readyState !== "loading"कि "डोम रेडी" राज्य के लिए जांच करना बेहतर होगा । यदि readyStateकिसी कारण से देर से जाँच की जाती है ("अंतःक्रियात्मक" स्थिति के बाद) तो यह समस्या को रोकता है ।

— रेनविस

Answer 2

पुस्तकालय की आवश्यकता नहीं। jQuery ने इस स्क्रिप्ट का थोड़ी देर के लिए उपयोग किया, btw।

http://dean.edwards.name/weblog/2006/06/again/

// Dean Edwards/Matthias Miller/John Resig

function init() {
  // quit if this function has already been called
  if (arguments.callee.done) return;

  // flag this function so we don't do the same thing twice
  arguments.callee.done = true;

  // kill the timer
  if (_timer) clearInterval(_timer);

  // do stuff
};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
  document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
  var script = document.getElementById("__ie_onload");
  script.onreadystatechange = function() {
    if (this.readyState == "complete") {
      init(); // call the onload handler
    }
  };
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      init(); // call the onload handler
    }
  }, 10);
}

/* for other browsers */
window.onload = init;

Comments

बिल्कुल वही, जो मैं देख रहा था - jQuery लाइब्रेरी के बिना jQuery.ready फ़ंक्शन। Thanx!

— स्ट्रिकजक्स

पूरी तरह से प्रश्न के बिंदु से चूक गए। initयदि आपके द्वारा पोस्ट किया गया यह कोड पृष्ठ के पहले ही लोड होने के बाद शामिल है, तो नहीं चलेगा, जो कि ओपी का बिंदु है: वह / वह नियंत्रित नहीं कर सकता जब उसकी स्क्रिप्ट शामिल हो। (ध्यान दें कि केवल setIntervalशाखा काम करेगी)

— Roatin Marth

यह एक पुस्तकालय में है। अन्य सभी पहियों के साथ लोग आमतौर पर फिर से आविष्कार करते हैं।

— b01

Answer 3

आप शायद jQuery जैसी किसी चीज़ का उपयोग करना चाहते हैं, जो JS प्रोग्रामिंग को आसान बनाता है।

कुछ इस तरह:

$(document).ready(function(){
   // Your code here
});

आप के बाद क्या कर रहे हैं प्रतीत होता है।

Comments

और अगर वह देखना चाहता है कि पोर्टेबल तरीके से jQuery कैसे करता है, तो jQuery का स्रोत निरीक्षण के लिए है :-)

— थॉमस एल होलाडे

और अगर यह स्पष्ट नहीं है, अगर दस्तावेज़ लोड के बादready() कहा जाता है , तो पारित फ़ंक्शन तुरंत चलाया जाता है।

— बेन ब्लैंक

@ ब्लैंक: जब तक डॉक्यूमेंट लोड होने के बाद jQuery खुद को इसमें शामिल नहीं करता;)

— Roatin Marth

@Roatin Marth - वास्तव में, यह भी ठीक काम करता है। (बस FF8 और IE8 पर jQuery 1.7.1 के साथ यह करने की कोशिश की।)

— बेन ब्लैंक

-1: भले ही जवाब समझ में आता है ओपी ने कभी भी jQuery का उल्लेख नहीं किया है। दस्तावेज़ तैयार करने के लिए संपूर्ण jQuery परियोजना का उपयोग करना ओवरकिल है।

— marcgg

Answer 4

if(document.readyState === 'complete') {
    DoStuffFunction();
} else {
    if (window.addEventListener) {  
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload', DoStuffFunction);
    }
}

Comments

ऐसा प्रतीत नहीं होता है कि नवीनतम क्रोम में काम document.loadedहमेशा अपरिभाषित होता है

— अनिकेत

यह 2010 था :)। अब मैं उपयोग करता हूँbody.readyState === 'loaded'

— Jman

Answer 5

यदि आप वास्तव में इस कोड को लोड पर चलाना चाहते हैं , तो पहले से ही नहीं (यानी आपको छवियों को भी लोड करने की आवश्यकता है), तो दुर्भाग्य से तैयार फ़ंक्शन आपके लिए ऐसा नहीं करता है। मैं आम तौर पर ऐसा कुछ करता हूं:

दस्तावेज़ जावास्क्रिप्ट में शामिल करें (यानी हमेशा ऑनलोड किए जाने से पहले बुलाया जाता है):

var pageisloaded=0;
window.addEvent('load',function(){
 pageisloaded=1;
});

फिर आपका कोड:

if (pageisloaded) {
 DoStuffFunction();
} else {
 window.addEvent('load',DoStuffFunction);
}

(या आपके वरीयता के समतुल्य।) मैं इस कोड का उपयोग भविष्य के पृष्ठों के लिए जावास्क्रिप्ट और छवियों के प्री-कोचिंग करने के लिए करता हूं। चूंकि मुझे जो सामान मिल रहा है, वह इस पृष्ठ के लिए बिल्कुल भी उपयोग नहीं किया गया है, मैं नहीं चाहता कि यह छवियों के शीघ्र डाउनलोड पर पूर्वता ले।

एक बेहतर तरीका हो सकता है, लेकिन मुझे इसे ढूंढना बाकी है।

Answer 6

मोज़िला फ़ायरफ़ॉक्स का कहना है कि onreadystatechangeयह एक विकल्प है DOMContentLoaded।

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        initApplication();
    }
}

में DOMContentLoadedMozila के दस्तावेज़ का कहना है:

DOMContentLoaded घटना को निकाल दिया जाता है जब दस्तावेज़ को पूरी तरह से लोड और पार्स किया गया होता है, लोडिंग खत्म करने के लिए स्टाइलशीट, छवियों और सबफ़्रेमियों की प्रतीक्षा किए बिना (लोड घटना का उपयोग पूरी तरह से लोड किए गए पृष्ठ का पता लगाने के लिए किया जा सकता है)।

मुझे लगता है कि loadघटना का उपयोग एक पूर्ण दस्तावेज़ + संसाधन लोड करने के लिए किया जाना चाहिए।

Answer 7

JQuery के साथ ऊपर वाला सबसे आसान और अधिकतर उपयोग किया जाने वाला तरीका है। हालाँकि आप शुद्ध जावास्क्रिप्ट का उपयोग कर सकते हैं, लेकिन इस स्क्रिप्ट को सिर में परिभाषित करने का प्रयास करें ताकि यह शुरुआत में पढ़ा जाए। आप जो खोज रहे हैं वह window.onloadघटना है।

नीचे एक सरल स्क्रिप्ट है जो मैंने काउंटर चलाने के लिए बनाई थी। काउंटर फिर 10 पुनरावृत्तियों के बाद बंद हो जाता है

window.onload=function()
{
    var counter = 0;
    var interval1 = setInterval(function()
    { 
        document.getElementById("div1").textContent=counter;
        counter++; 
        if(counter==10)
        {
            clearInterval(interval1);
        }
    },1000);

}

Answer 8

इसे इस्तेमाल करे:

var body = document.getElementsByTagName('BODY')[0];
// CONDITION DOES NOT WORK
if ((body && body.readyState == 'loaded') || (body &&  body.readyState == 'complete') ) {
    DoStuffFunction();
} else {
    // CODE BELOW WORKS
    if (window.addEventListener) {
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload',DoStuffFunction);
    }
}

Answer 9

मेरे पास दूसरा उपाय है, MyApp के नए ऑब्जेक्ट के निर्माण के समय मेरे आवेदन को शुरू करने की आवश्यकता है, इसलिए ऐसा दिखता है:

function MyApp(objId){
     this.init=function(){
        //.........
     }
     this.run=function(){
          if(!document || !document.body || !window[objId]){
              window.setTimeout(objId+".run();",100);
              return;
          }
          this.init();
     };
     this.run();
}
//and i am starting it 
var app=new MyApp('app');

यह सभी ब्राउज़रों पर काम कर रहा है, जो मुझे पता है।