बॉडी लोड पर ट्रिगर इवेंट पूर्ण जेएस/jquery

Question

मैं जावास्क्रिप्ट/jquery का उपयोग कर पेज लोड पर एक ईवेंट ट्रिगर करना चाहता हूं।

क्या पृष्ठ लोड होने के बाद ईवेंट को ट्रिगर करने या एक साधारण फ़ंक्शन को कॉल करने का कोई तरीका है।

यदि आप कोई संदर्भ करते हैं तो कृपया लोगों को सुझाव दें।

Answer 1

हर किसी का ready समारोह (और इसके शॉर्टकट) का उल्लेख किया है, लेकिन उससे भी पहले की तुलना में, तुम बस कोड एक script टैग में बस से पहले बंद करने body टैग डाल सकते हैं (यह क्या YUI और गूगल बंद लोगों की सलाह देते है), इस तरह:

<script type='text/javascript'> 
pageLoad(); 
</script> 
</body> 

इस बिंदु पर, उस स्क्रिप्ट टैग के ऊपर सब कुछ DOM में उपलब्ध है।

तो घटना के क्रम में अपने विकल्प:

1. जल्द से जल्द: script टैग में समारोह कॉल सिर्फ body टैग बंद करने से पहले। इस बिंदु पर डीओएम तैयार है (Google क्लोजर लोगों के अनुसार, और उन्हें पता होना चाहिए; मैंने इसे ब्राउज़र के समूह पर भी परीक्षण किया है)।

2. प्रारंभिक: jQuery.ready कॉलबैक (और इसके शॉर्टकट फॉर्म)।

3. देर, के बाद छवियों सहित सभी पृष्ठ तत्वों को पूरी तरह से लोड किए गए हैं: windowonload घटना।

यहाँ एक जीवित उदाहरण है: http://jsbin.com/icazi4, प्रासंगिक निकालने:

</body> 
<script type='text/javascript'> 
    runPage(); 

    jQuery(function() { 
    display("From <tt>jQuery.ready</tt> callback."); 
    }); 

    $(window).load(function() { 
    display("From <tt>window.onload</tt> callback."); 
    }); 

    function runPage() { 
    display("From function call at end of <tt>body</tt> tag."); 
    } 

    function display(msg) { 
    var p = document.createElement('p'); 
    p.innerHTML = msg; 
    document.body.appendChild(p); 
    } 
</script> 

(हाँ, मैं display समारोह के लिए jQuery का इस्तेमाल किया है सकते हैं, लेकिन मैं एक गैर jQuery टेम्पलेट के साथ शुरू किया गया था।)

Answer 2

जब पृष्ठ लोड पूरी तरह से (डोम, चित्र, ...)

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

जब डोम तत्वों लोड (आवश्यक सभी छवियों को नहीं लोड किया जाएगा)

$(function(){ 
    // DOM Ready 
}); 

तो फिर तुम किसी भी ट्रिगर कर सकते हैं घटना

$("element").trigger("event"); 

Answer 3

$(document).ready(function() { 
    // do needed things 
}); 

डीओएम संरचना तैयार होने के बाद यह ट्रिगर हो जाएगा।

Answer 4

jQuery:

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

:

$(function(){ 
    // your code...this will run when DOM is ready 
}); 

आप छवियों/फ्रेम सहित सभी पेज संसाधनों/डोम लोड करने के बाद अपने कोड को चलाना चाहते हैं, तो आप load घटना उपयोग करने की आवश्यकता जावास्क्रिप्ट:

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

Answer 5

नहीं

$(document).ready(function() { 

    }); 

है आप के लिए क्या देख रहे हैं?

Answer 6

$(document).ready(function() { YOUR CODE HERE }) 

Answer 7

windows.load फ़ंक्शन उपयोगी है यदि आप सबकुछ लोड होने पर कुछ करना चाहते हैं।

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

लेकिन आप किसी अन्य तत्व पर .load फ़ंक्शन का भी उपयोग कर सकते हैं। तो अगर आप एक विशेष रूप से बड़ी छवि है और आप कुछ करना चाहता हूँ जब कि भार लेकिन अपने पेज लोड हो रहा है कोड के बाकी जब डोम लोड होते ही आप कर सकता है:

$(function(){ 
    // Dom loaded code 

    $('#largeImage').load({ 
     // Image loaded code 
    }); 
}); 

इसके अलावा jQuery .load समारोह काफी है एक सामान्य के रूप में वही।

Answer 8

आप script टैग में विशेषता भी दे सकते हैं। जब तक आप async निर्दिष्ट नहीं करते हैं जो निश्चित रूप से आपके उद्देश्य के लिए उपयोगी नहीं होगा।

उदाहरण:

<script src="//other-domain.com/script.js" defer></script> 
<script src="myscript.js" defer></script> 

described here के रूप में:

उपरोक्त उदाहरण में, ब्राउज़र समानांतर में दोनों लिपियों डाउनलोड करने और उन्हें बस से पहले DOMContentLoaded आग पर अमल, उनकी व्यवस्था बनाए रखने होगा।

[...] आस्थगित स्क्रिप्ट के बाद दस्तावेज़ पार्स था चलाना चाहिए, क्रम में उन्हें जोड़ा गया था [...]

संबंधित Stackoverflow विचार विमर्श: How exactly does <script defer=“defer”> work?

Answer 9

इस समारोह पर कब कॉल करेंगे DOM संरचना तैयार है दूसरों के लिए

$(document).ready(function() { 
     userCommission(); 
     //Show commision box 
     $('#userroles').change(function(){ 
      userCommission(); 
     }); 

     function userCommission() { 
      var roles = $('#userroles').val(); 
      var result = roles.map(function (x) { 
       return parseInt(x, 10); 
      }); 
      var i = result.indexOf(6);   
      console.log(i); 
      if(i == -1) { 
       console.log('inside'); 
       $('.user-commission :input').attr("disabled", true);; 
       $('#user-commission').hide(); 
      } 
     } });