121

मैं पेज लोड होने के बाद कुछ कथनों को निष्पादित करने के लिए निम्नलिखित कोड का उपयोग कर रहा हूं।

 <script type="text/javascript">
    window.onload = function () { 

        newInvite();
        document.ag.src="b.jpg";
    }
</script>

लेकिन यह कोड ठीक से काम नहीं करता है। कुछ छवियों या तत्वों को लोड करने पर भी फ़ंक्शन को कहा जाता है। मैं जो चाहता हूं वह फ़ंक्शन को कॉल करना है जो पृष्ठ पूरी तरह से लोड है।

javascript html image

— नीरज कुमार
स्रोत

1

आप JSFiddle.net पर एक डेमो जोड़ सकते हैं ?

— कुछ लड़के

2

क्या आप jQuery का उपयोग कर सकते हैं? यदि हां, तो कोशिश करें$(window).load()

— मैट हिंट्ज़के

हां, क्या आप ठीक से समझा सकते हैं कि क्या ठीक से काम नहीं कर रहा है? क्या आपको कोई त्रुटि मिल रही है, या शायद आप alertविंडो रीडर्स से पहले एक फ़ंक्शन को कॉल कर रहे हैं (यह ऐसा लग रहा है जैसे इसे लोड से पहले कहा जाता है)? कोड ठीक लग रहा है, और उपयोगकर्ताओं को बड़े पुस्तकालयों को डाउनलोड करने के लिए मजबूर करना शायद इस मुद्दे को ठीक नहीं करेगा या इसका निदान करना आसान बना देगा।

— जेफरी स्वीनी

doxdesk.com/img/updates/20091116-so-large.gif

— जेफरी स्वीनी

जब मैं कहता हूं कि यह काम नहीं कर रहा है, तो मेरा मतलब है कि फ़ंक्शन से निकाल दिया जाता है, भले ही कुछ छवियों को लोड किया जा रहा हो।

— नीरज कुमार

166

यह आपके लिए काम कर सकता है:

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

या अगर आपका आराम jquery के साथ है,

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

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

जैसा कि जेफरी स्वीनी और जे टॉरेस ने सुझाव दिया, मुझे लगता है कि setTimeoutफंक्शन करने से पहले बेहतर होगा कि नीचे दिए गए फंक्शन को फेयर करें:

setTimeout(function(){
 //your code here
}, 3000);

— श्रीधर
स्रोत

12

jQuery का readyओपी अनुरोध नहीं करेगा। readyआग जब डोम लोड करती है, तत्वों के लोड के बाद नहीं। loadतत्वों को लोडिंग / रेंडरिंग खत्म करने के बाद फायर करेगा।

— Jaime Torres

ऐसा लगता है कि ओपी चाहता है कि सभी तत्व पूरी तरह से लोड हो जाएं, न कि केवल HTML।

— जेफरी स्वीनी

3

@ श्रीधर या वह नौकरी के लिए सही उपकरण का उपयोग कर सकता है ( load)।

— Jaime Torres

14

setTimeoutएक बुरा विचार है। यह पेज लोडिंग पर 3 सेकंड (या एन सेकंड सेकंड के आधार पर निर्भर करता है कि आप क्या मूल्य चुनते हैं।) यदि लोड होने में अधिक समय लगता है, तो यह काम नहीं करेगा, और यदि पेज तेजी से लोड होता है, तो इसे बिना किसी कारण के इंतजार करना होगा।

— JJJ

1

@ChristianMatthew इसका उपयोग करें चैप्टर यदि सही है, तो useCapture इंगित करता है कि उपयोगकर्ता कैप्चर आरंभ करना चाहता है। कैप्चर शुरू करने के बाद, निर्दिष्ट प्रकार की सभी घटनाओं को डोम ट्री में किसी भी ईवेंटटार्ग के नीचे भेजने से पहले पंजीकृत श्रोता को भेज दिया जाएगा। पेड़ के माध्यम से ऊपर की ओर बुदबुदाने वाली घटनाएं कब्जा करने के लिए नामित श्रोता को ट्रिगर नहीं करेंगी। विस्तृत विवरण के लिए DOM स्तर 3 ईवेंट देखें ।

— श्रीधर

52

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

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

jQuery के लिए समान:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});

नोट: - नीचे दिए गए मार्कअप का उपयोग न करें (क्योंकि यह अन्य समान तरह की घोषणाओं को ओवरराइट करता है):

document.onreadystatechange = ...

— T.Todua
स्रोत

1

क्या यह क्रॉस ब्राउज़र समर्थित है

— ब्लूजके

यह उत्तर दूसरों की तुलना में बहुत बेहतर है। +1

— Xydez

बहुत अच्छा! धन्यवाद।

— फ़ारज़िन कांजी

34

यदि आप jQuery का उपयोग कर सकते हैं, तो लोड को देखें । आप अपने तत्व को लोड करने के बाद चलाने के लिए अपना फ़ंक्शन सेट कर सकते हैं।

उदाहरण के लिए, एक साधारण छवि वाले पृष्ठ पर विचार करें:

<img src="book.png" alt="Book" id="book" />

ईवेंट हैंडलर छवि के लिए बाध्य हो सकता है:

$('#book').load(function() {
  // Handler for .load() called.
});

यदि आपको लोड करने के लिए वर्तमान विंडो पर सभी तत्वों की आवश्यकता है, तो आप उपयोग कर सकते हैं

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

— Jaime Torres
स्रोत

1

क्या jQuery loadपद्धति सिर्फ जावास्क्रिप्ट के उपयोग से लोड फ़ंक्शन के लिए एक फ़ंक्शन को बांधती नहीं है? यह कैसे अलग होगा जो ओपी पहले से कर रहा है?

— एलेक्स कालिकि

@AlexKalicki AFAIK यह कोई अलग नहीं होगा, सिवाय इसके कि jQuery addEventListenerDOM0 onloadसंपत्ति को बांधने के बजाय उपयोग कर सकता है।

— अलनीतक

@AlexKalicki मैं यह नहीं कह सकता कि यह ठीक उसी कार्यक्षमता का उपयोग करता है, लेकिन प्रलेखन के अनुसार, jQuery सुनिश्चित कर रहा है कि इस आग से पहले छवियों सहित सभी तत्वों को लोड किया जाए। मुझे विश्वास है कि अगर यह मामला है, तो जगह में अतिरिक्त तर्क होंगे, और मेरे पास दस्तावेज़ीकरण को अविश्वास करने का कोई कारण नहीं है, हालांकि मैं कभी भी उसी मुद्दे पर नहीं चला हूं जो ओपी रिपोर्टिंग कर रहा है।

— Jaime Torres

4

JQuery v1.8 के रूप में, .लोड को हटा दिया जाता है। source

— अदोनिस के। काकोलीडिस

1

प्रश्न के लिए सबसे अच्छा समाधान।

— रॉबर्टो सेपूलेडा ब्रावो

29

मैं थोड़ा भ्रमित हूं कि आपके द्वारा पृष्ठ लोड पूर्ण, "DOM लोड" या "सामग्री लोड" के साथ क्या मतलब है? HTML पेज में दो प्रकार के इवेंट के बाद ईवेंट लोड हो सकता है।

DOM लोड: जो सुनिश्चित करता है कि संपूर्ण DOM ट्री लोड शुरू हो। लेकिन संदर्भ सामग्री लोड करना सुनिश्चित न करें। मान लीजिए कि आपने imgटैग के द्वारा चित्र जोड़े हैं , इसलिए यह घटना सुनिश्चित करती है कि सभी imgभरी हुई हैं लेकिन कोई चित्र ठीक से लोड नहीं है या नहीं। इस घटना को प्राप्त करने के लिए आपको निम्नलिखित तरीके से लिखना चाहिए:
```
document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);
```
या jQuery का उपयोग कर:
```
$(document).ready(function(){
// your code
});
```
DOM और कंटेंट लोड के बाद: जो DOM और कंटेंट लोड को भी दर्शाता है। यह न केवल imgटैग को सुनिश्चित करेगा बल्कि यह सभी छवियों या अन्य संबंधित सामग्री को भी सुनिश्चित करेगा। इस घटना को प्राप्त करने के लिए आपको निम्नलिखित तरीके से लिखना चाहिए:
```
window.addEventListener('load', function() {...})
```
या jQuery का उपयोग कर:
```
$(window).on('load', function() {
 console.log('All assets are loaded')
})
```

— हनीफ
स्रोत

2

यहाँ केवल यही एक उत्तर है जो स्पष्ट विवरण के साथ ओपी के लिए एक गैर- jQuery समाधान देता है

— वेलोजेट

@ हनीफ DOMContentLoadedइवेंट हैंडलर मेरे लिए कुछ भी नहीं loadकरता है, लेकिन करता है।

— ब्रैंडन बेनेफिट

1

क्या पिछले दो उदाहरणों के अंत में अर्धविराम की आवश्यकता नहीं है?

— आर। नवेगा

11

अगर आप अपने html पेज में onload इवेंट में js फ़ंक्शन को कॉल करना चाहते हैं। जब उपयोगकर्ता एजेंट किसी FRAMESET के भीतर विंडो या सभी फ़्रेम लोड करना समाप्त करता है, तो ऑनलोड घटना होती है। इस विशेषता का उपयोग BODY और FRAMESET तत्वों के साथ किया जा सकता है।

<body onload="callFunction();">
....
</body>

— user2361682
स्रोत

7

इस तरह आप दोनों मामलों को संभाल सकते हैं - यदि पृष्ठ पहले से लोड है या नहीं:

document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}

— tsveti_iko
स्रोत

3

वैकल्पिक रूप से आप नीचे कोशिश कर सकते हैं।

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

यह सभी मामलों में काम करता है। यह तभी पूरा होगा जब पूरा पेज लोड होगा।

— गणेश राम रवि
स्रोत

3

तुम सबसे अच्छी शर्त हो जहाँ तक मुझे पता है कि इसका उपयोग करना है

window.addEventListener('load', function() {
    console.log('All assets loaded')
});

DOMContentLoadedईवेंट का उपयोग करने का # 1 उत्तर एक कदम पीछे की ओर है क्योंकि डोम सभी परिसंपत्तियों के लोड से पहले लोड होगा।

अन्य उत्तर यह सलाह देते हैं setTimeoutकि मैं इसका दृढ़ता से विरोध करूंगा क्योंकि यह ग्राहक के डिवाइस प्रदर्शन और नेटवर्क कनेक्शन की गति के लिए पूरी तरह से व्यक्तिपरक है। यदि कोई धीमे नेटवर्क पर है और / या उसके पास एक धीमा सीपीयू है, तो एक पृष्ठ लोड होने में कई से दर्जनों सेकंड ले सकता है, इस प्रकार आप अनुमान नहीं लगा सकते हैं कि कितने समय setTimeoutकी आवश्यकता होगी।

जब तक readystatechange, एमडीएन केreadyState अनुसार, जो भी घटना के पहले होगा तब भी यह आग लगाता है ।load

पूर्ण

राज्य इंगित करता है कि लोड घटना आग लगने वाली है।

— रयान वाकर
स्रोत

2

window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}

— tvrcgo
स्रोत

2

हालांकि यह कोड स्निपेट समाधान हो सकता है, जिसमें स्पष्टीकरण भी शामिल है , जो आपके पोस्ट की गुणवत्ता को बेहतर बनाने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— yivi

@yivi अगर यह एक स्वचालित संदेश नहीं है: यह किसी के लिए बहुत स्पष्ट है कि उस कोड का क्या मतलब है, खासकर जब से कोड में टिप्पणी कर रहे हैं ..

— ब्लूजेक

1

यदि आप किसी भी जेएस फ्रेमवर्क का उपयोग नहीं कर रहे हैं, तो यह परियोजना क्रॉस ब्राउज़र संगतता के साथ डोम तैयार राज्य प्राप्त करने का सबसे अच्छा तरीका है

https://github.com/ded/domready/blob/master/ready.js

— ओलिवियर रिफलो
स्रोत

1

यदि आप पहले से ही jQuery का उपयोग कर रहे हैं, तो आप यह कोशिश कर सकते हैं:

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

— संतोष
स्रोत

4

बिना स्पष्टीकरण के बेकार।

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

1

मैं आपको बता सकता हूं कि मुझे जो सबसे अच्छा उत्तर मिला, वह है </body>कमांड के ठीक बाद "ड्राइवर" स्क्रिप्ट डालना । यह सबसे आसान और, शायद, कुछ समाधानों की तुलना में अधिक सार्वभौमिक है, ऊपर।

योजना: मेरे पृष्ठ पर एक तालिका है। मैं ब्राउज़र के लिए तालिका के साथ पृष्ठ लिखता हूं, फिर इसे जेएस के साथ सॉर्ट करता हूं। उपयोगकर्ता कॉलम हेडर पर क्लिक करके इसका सहारा ले सकता है।

तालिका के समाप्त होने के बाद एक </tbody>कमांड समाप्त हो जाती है , और बॉडी समाप्त हो जाती है, मैं निम्न पंक्ति का उपयोग कॉलम द्वारा तालिका को सॉर्ट करने के लिए जेएस को सॉर्ट करने के लिए करता हूं। 3. मुझे वेब से छंटनी वाली स्क्रिप्ट मिली, इसलिए इसे यहां पुन: प्रस्तुत नहीं किया गया है। कम से कम अगले वर्ष के लिए, आप इसे संचालन में देख सकते हैं, जिसमें जेएस भी शामिल है static29.ILikeTheInternet.com। पृष्ठ के नीचे "यहाँ" पर क्लिक करें। वह टेबल और स्क्रिप्ट के साथ एक और पेज लाएगा। आप इसे डेटा डाल सकते हैं, फिर जल्दी से इसे सॉर्ट कर सकते हैं। मुझे इसे थोड़ा तेज करने की आवश्यकता है लेकिन मूल बातें अभी हैं।

</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

MakerMikey

— मिचेल मोरो
स्रोत

0

इस jQuery का प्रयास करें :

$(function() {
 // Handler for .ready() called.
});

— djserva
स्रोत

1

jQuery का readyओपी अनुरोध नहीं करेगा। readyआग जब डोम लोड करती है, तत्वों के लोड के बाद नहीं। loadतत्वों को लोडिंग / रेंडरिंग खत्म करने के बाद फायर करेगा।

— Jaime Torres

0

पूर्ण पृष्ठ लोड सेट समय समाप्त होने के बाद फ़ंक्शन को कॉल करें

setTimeout(function() {
   var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
	for(var i, j = 0; i = ddl2.options[j]; j++) {
		if(i.text == val) {      
			ddl2.selectedIndex = i.index;
			break;
		}
	} 
}, 1000);

स्निपेट का विस्तार करें

— एमएच
स्रोत

0

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

function getDocReadyPromise()
{
  function promiseDocReady(resolve)
  {
    function checkDocReady()
    {
      if (document.readyState === "complete")
      {
        clearInterval(intervalDocReady);
        resolve();
      }
    }
    var intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

बेशक, अगर आपको IE का समर्थन नहीं करना है:

const getDocReadyPromise = () =>
{
  const promiseDocReady = (resolve) =>
  {
    const checkDocReady = () =>
      ((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
    let intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

उस फ़ंक्शन के साथ, आप निम्न कार्य कर सकते हैं:

getDocReadyPromise().then(whatIveBeenWaitingToDo);

— पॉल रोवे
स्रोत

-1

मैं वेब घटकों का उपयोग कर रहा हूं ताकि मेरे लिए काम करें:

document.addEventListener('WebComponentsReady', function() {
       document.querySelector('your-element').show();
});

— ufukomer
स्रोत

-3

बॉडी टैग पूरा होने के बाद अपनी स्क्रिप्ट डालें ... यह काम करता है ...

— कल्याण
स्रोत

पूर्ण पृष्ठ लोड के बाद फ़ंक्शन निष्पादित करें

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

jQuery के लिए समान: