जब पृष्ठ पूरी तरह से लोड हो गया है तो किसी फ़ंक्शन को कैसे निष्पादित करें?

Question

जब पृष्ठ पूरी तरह से लोड हो जाता है तो मुझे कुछ जावास्क्रिप्ट कोड निष्पादित करने की आवश्यकता होती है। इसमें चित्र जैसी चीजें शामिल हैं।

मुझे पता है कि आप जाँच सकते हैं कि क्या DOM तैयार है, लेकिन मुझे नहीं पता कि क्या यह वैसा ही है जब पेज पूरी तरह से लोड है।

Comments

तो, आप कैसे जांचते हैं कि डोम तैयार है या नहीं?

— मैड्स स्केजर्न

Answer 1

यही कहा जाता है load। DOM के आसपास तैयार होने से पहले यह waaaaay आया था, और DOM तैयार वास्तव में सटीक कारण के लिए बनाया गया था जो loadछवियों पर इंतजार कर रहा था।

window.addEventListener('load', function () {
  alert("It's loaded!")
})

Comments

इसलिए, बस तैयार करने के लिए (यदि मैं कर सकता हूँ) स्पष्ट करें, तो डोम तैयार की तुलना में, window.onloadतब कहा जाता है जब हर पृष्ठ घटक / रिसोर्स (यानी * * छवियों सहित)। क्या मैं सही हू?

— ब्रेकफ्रे

@ क्रेकप्रिक: हाँ :) onloadउन सभी संसाधनों की प्रतीक्षा करता है जो दस्तावेज़ का हिस्सा हैं। यह, ज़ाहिर है, अनुरोधों को गतिशील रूप से बनाया गया है जो दस्तावेज़ का हिस्सा नहीं हैं, उदाहरण के लिए, एक AJAX अनुरोध।

— माचिस

स्क्रिप्ट पूरी तरह से भरी हुई नहीं है

— HD ..

यदि मैं अपने हैंडलर को जोड़ने से पहले मेरी स्क्रिप्ट को गतिशील रूप से लोड और "लोड" घटना हो सकती है तो क्या होगा?

— 10

एक बेहतर तरीका होगा addEventListener("load", function(){... संपत्ति })को अधिलेखित करने के बजाय onload।

— user4642212

Answer 2

आमतौर पर आप उपयोग कर सकते हैं window.onload, लेकिन आप नोटिस कर सकते हैं कि हाल के ब्राउज़रों में फायर नहीं होता है window.onloadजब आप बैक / फॉरवर्ड हिस्ट्री बटन का उपयोग करते हैं।

कुछ लोग इस समस्या के आसपास काम करने के लिए अजीब अंतर्विरोधों का सुझाव देते हैं , लेकिन वास्तव में अगर आप सिर्फ एक window.onunloadहैंडलर बनाते हैं (यहां तक ​​कि जो कुछ भी नहीं करता है), तो यह कैशिंग व्यवहार सभी ब्राउज़रों में अक्षम हो जाएगा । MDC इस "सुविधा" दस्तावेजों बहुत अच्छी तरह से है, लेकिन किसी कारण से वहाँ अभी भी उपयोग कर रहे हैं setIntervalऔर अन्य अजीब हैक्स।

ओपेरा के कुछ संस्करणों में एक बग होता है जिसे आपके पृष्ठ में कहीं न कहीं जोड़कर काम किया जा सकता है:

<script>history.navigationMode = 'compatible';</script>

यदि आप एक जावास्क्रिप्ट फ़ंक्शन प्राप्त करने की कोशिश कर रहे हैं जिसे एक बार प्रति-दृश्य कहा जाता है (और जरूरी नहीं कि डोम लोड होने के बाद), तो आप कुछ इस तरह कर सकते हैं:

<img src="javascript:location.href='javascript:yourFunction();';">

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

<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">

Comments

क्या कोई स्पष्ट कर सकता है कि यह चाल कैसे काम करती है? बहुत, DOH .. मेरे लिए जटिल

— कोलाहलपूर्ण

Answer 3

संपूर्णता के लिए, आप इसे DOMContentLoaded से बाँधना चाह सकते हैं, जो अब व्यापक रूप से समर्थित है

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

अधिक जानकारी: https://developer.mozilla.org/en-US/docs/Web/Events/DOMCententeladed

Comments

यह उत्तर सवाल में पूछे गए सवाल के ठीक विपरीत है।

— मुहम्मद बिन युसरत

वास्तव में DOMContentLoaded घटना तब ट्रिगर हो जाती है जब सभी DOM सामग्री लोड हो चुकी होती है, इससे पहले कि वह अपनी सभी निर्भरता को लोड कर लेती है। चूंकि उत्तर के धागे में उपयोगकर्ता संदर्भित थे, $.readyमुझे लगा कि यह एक अच्छा योगदान है। Btw। हालांकि, मैं addEventListenerइस loadघटना के लिए -method का भी उपयोग करूँगा , क्योंकि यह आपको कई कॉलबैक करने की अनुमति देता है:window.addEventListener("load", function(event){ // your code here });

— अंकुश लगाने के लिए

Answer 4

इसे आज़माएं इसके बाद ही रन करें एंट्री पेज के बाद लोड किया गया है

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

window.onload = function(){
    // code goes here
};

Jquery द्वारा

$(window).bind("load", function() {
    // code goes here
});

Comments

$(window)मुझे लगता है कि यह jquery होगा - सही है? या मैं कुछ जावास्क्रिप्ट वाक्यविन्यास उलझन में हूँ? (मैं जेएस के लिए नया हूं)।

— अज़ेंदेल

$(document).ready();जब jQuery उपलब्ध हो तो बस उपयोग क्यों न करें ?

— एंड्रियास

तुम्हारा दस्तावेज है (कमोबेश बस पार्स किए गए HTML), अन्य ("लोड") छवियों और शैलियों सहित सब कुछ है । आप की जरूरत पर निर्भर करता है

— एंथेसिस

Answer 5

इस कोड को आज़माएं

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

अधिक जानकारी के लिए https://developer.mozilla.org/en-US/docs/DOM/document.readyState पर जाएं

Comments

हाँ, यह मददगार है। बहुत बहुत धन्यवाद ~

— ब्रावो यंग

"interactive"पूरी तरह से भरी हुई नहीं है। "complete"पूरी तरह से भरी हुई है

— रयान वॉकर

अंत में! धन्यवाद एक लाख, याकूब। यहां सूचीबद्ध कई विधियां विफल होने पर (सबसे अच्छी तरह से, एक रेडियोबॉटन को अपडेट किया जाएगा, और परिणामस्वरूप गणना की जा सकती है, लेकिन बटन दबाया नहीं जाएगा), आपकी विधि चाल करती है।

— एसईसीआर

Answer 6

window.onload घटना आग लग जाएगी जब सब कुछ लोड हो जाता है, जिसमें चित्र आदि शामिल हैं।

यदि आप अपना js कोड जल्द से जल्द निष्पादित करना चाहते हैं, तो आप DOM तैयार स्थिति की जाँच करना चाहेंगे, लेकिन आपको अभी भी DOM तत्वों को एक्सेस करने की आवश्यकता है।

Answer 7

onLoad()घटना का उपयोग करते हुए जावास्क्रिप्ट , निष्पादित होने से पहले पृष्ठ लोड होने की प्रतीक्षा करेगा।

<body onload="somecode();" >

यदि आप jQuery फ्रेमवर्क के दस्तावेज़ तैयार फ़ंक्शन का उपयोग कर रहे हैं तो जैसे ही डोम लोड होता है और पृष्ठ सामग्री लोड होने से पहले कोड लोड हो जाएगा:

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

Answer 8

आप window.onload का उपयोग करना चाह सकते हैं , क्योंकि डॉक्स इंगित करता है कि यह तब तक फायर नहीं किया जाता है जब तक कि DOM तैयार न हो जाए और पेज की सभी अन्य संपत्तियां (चित्र, आदि) लोड न हो जाएं।

Comments

आह शानदार। खैर ive ने यह किया। पृष्ठ पर अंतिम छवि यह है: <img src = "imdbupdate.php? Update = ajax" शैली = "प्रदर्शन: छिपा हुआ" onload = "window.location = 'movies.php? Do"> ">"> फिर भी? मुझे रीडायरेक्ट नहीं करता

— बेन शेलॉक

...क्या? आप छवि लोड होने के बाद पुनर्निर्देशित करना चाहते हैं?

— माचिस

मुझे यकीन नहीं है कि आप ऐसा क्यों चाहते हैं, लेकिन इसका कारण यह नहीं है कि यह अप्रत्यक्ष हो सकता है कि यह प्रदर्शित हो: छिपा हुआ हो, और इस तरह से ब्राउज़र इसे लोड करने के लिए परेशान नहीं करता है क्योंकि यह नहीं दिखाया जाएगा।

— माचिस

शायद यह सिर्फ एक छिपी हुई छवि है जो सर्वर पर कुछ महत्वपूर्ण करता है, जैसे हिट को ट्रैक करना या डीबी में कुछ करना?

— मार्क नोवाकोव्स्की

मुझे लगता है कि हो सकता है, लेकिन मुझे समझ में नहीं आने के बाद इसे पुनर्निर्देशित करना है। यदि आपके पास उपयोगकर्ता उस पर समय बिताना नहीं चाहता है तो पृष्ठ पर क्यों है? और अगर लक्ष्य को लोड पर पुनर्निर्देशित करना है, तो बस एक खिड़की का उपयोग क्यों न करें। एक घटना, क्योंकि यह एक समग्र कार्यान्वयन है?

— मैचू

Answer 9

और यहाँ प्रोटोटाइप प्रोटोटाइप के साथ ऐसा करने का एक तरीका है :

Event.observe(window, 'load', function(event) {
    // Do stuff
});

Answer 10

आधुनिक जावास्क्रिप्ट के साथ आधुनिक ब्राउज़रों में (> = 2015) आप type="module"अपने स्क्रिप्ट टैग में जोड़ सकते हैं , और उस स्क्रिप्ट के अंदर सब कुछ पूरे पेज लोड होने के बाद निष्पादित होगा। उदाहरण के लिए:

<script type="module">
  alert("runs after") // Whole page loads before this line execute
</script>
<script>
  alert("runs before")
</script>

पुराने ब्राउज़र भी nomoduleविशेषता को समझेंगे । कुछ इस तरह:

<script nomodule>
  alert("tuns after")
</script>

अधिक जानकारी के लिए आप javascript.info पर जा सकते हैं ।

Answer 11

यदि आपको इसके बजाय (jQuery) कई onloadउपयोग करने की आवश्यकता है $(window).load:

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

Answer 12

ऑनलोड GlobalEventHandlers mixin की संपत्ति एक का भार घटना के लिए एक ईवेंट हैंडलर है खिड़की, XMLHttpRequest, तत्व, आदि, जो सक्रिय होता है संसाधन लोड किया है।

इसलिए मूल रूप से जावास्क्रिप्ट में पहले से ही विंडो पर ऑनलोड विधि है जो निष्पादित होती है जो छवियों सहित पूरी तरह से लोड की गई पृष्ठ ...

आप कुछ कर सकते हैं:

var spinner = true;

window.onload = function() {
  //whatever you like to do now, for example hide the spinner in this case
  spinner = false;
};

Answer 13

2019 अपडेट: यह मेरे लिए काम करने वाला जवाब था। जैसा कि मुझे सूची आइटम गिनने के लिए डेटा को आग और वापस करने के लिए कई ajax अनुरोधों की आवश्यकता थी।

$(document).ajaxComplete(function(){
       alert("Everything is ready now!");
});