jQuery - $ (दस्तावेज़) .ready और $ (विंडो) .load के बीच क्या अंतर हैं?

Question

आपस में क्या मतभेद हैं

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

तथा

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

---

और मैं यह सुनिश्चित करना चाहता हूं कि:

$(document).ready(function(){

}) 

तथा

$(function(){

}); 

तथा

jQuery(document).ready(function(){

});

समान हैं।

क्या आप मुझे बता सकते हैं कि उनके बीच क्या अंतर और समानताएं हैं?

Comments

संभव डुप्लिकेट की window.onload बनाम document.ready

— प्रणय राणा

लोलज़, उन्होंने मेरे (बिना उल्लेख किए) उसी लिंक से कॉपी की और स्वीकार कर लिया: पी लेसन ने सीखा, डेवलपर्स को नहीं समझा, वे इसके बजाय कोड देखना पसंद करते हैं: डी

— रिफत

@Rifat मैं माफी चाहता हूँ, लेकिन Oyeme के प्रारूप को पढ़ना आसान है> _ <

— Hungneox

@ यूरेका इट्स ओके। आपको क्षमा करने की आवश्यकता नहीं है :) हम दोनों ने आपकी मदद करने की कोशिश की। लेकिन, उन्हें क्रेडिट का उल्लेख करना चाहिए: पी

— रिफत

संभव डुप्लिकेट का window.onload बनाम body.onload बनाम document.onready

— vault

Answer 1

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

क्वेरी 3.0 संस्करण

ब्रेकिंग परिवर्तन: .load (), .unload (), और .err () हटाया गया

ये विधियाँ ईवेंट संचालन के लिए शॉर्टकट हैं, लेकिन इनमें कई API सीमाएँ थीं। घटना .load()विधि अजाक्स .load() विधि के साथ संघर्ष किया । .error()विधि के साथ प्रयोग नहीं किया जा सकता है window.onerror क्योंकि जिस तरह से डोम विधि परिभाषित किया गया है की। यदि आपको इन नामों से घटनाओं को संलग्न करने की आवश्यकता है, तो .on()विधि का उपयोग करें , उदाहरण के लिए बदल $("img").load(fn)दें $(img).on("load", fn)। ¹

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

को बदलना चाहिए

$(window).on('load', function (e) {})

ये सभी बराबर हैं:

$(function(){
}); 

jQuery(document).ready(function(){
});

$(document).ready(function(){
});

$(document).on('ready', function(){
})

Comments

ओरिग्नल

— प्रणय राणा

उत्तरार्द्ध को पसंद किया जाता है क्योंकि दूसरों को पदावनत किया जाता है। इसके अलावा, बाद वाला (मेरा मानना ​​है) विशेष रूप से कई हैंडलर की अनुमति देता है, इसलिए आपके पास कई स्क्रिप्ट हो सकते हैं। एक (। 'तैयार' ...) हैंडलर

— इवान लैंग्लिस

.on( "ready", handler )- jQuery के 1.8 के रूप में पदावनत। देखें api.jquery.com/ready

— TeNNoX

बीच क्या अंतर है $(document).readyऔर $(document).load?

— रीनटोव

$ (दस्तावेज़)। पहले से ही - "निष्पादित जब HTML- दस्तावेज़ लोड किया जाता है और DOM तैयार है" - तो यह दस्तावेज़ लोड होने के तुरंत बाद चलेगा, लोड करने के लिए किसी भी चित्र का इंतजार नहीं कर रहा है, या फ़्रेम, ऑब्जेक्ट या जो भी अभी तक लोड नहीं हुआ है । $ (दस्तावेज़) .लोड - "निष्पादित जब पूरा पृष्ठ पूरी तरह से भरा हुआ है, जिसमें सभी फ़्रेम, ऑब्जेक्ट और चित्र शामिल हैं" - इसलिए यह लोड होने के लिए प्रतीक्षा करेगा - दस्तावेज़, डोम, चित्र, स्क्रिप्ट, फ़्रेम, ऑब्जेक्ट, जो भी - और फिर और तभी यह चलेगा।

— pazof

Answer 2

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

एक संबंधित प्रश्न भी पढ़ें:
$ (विंडो) .load () और $ (डॉक्यूमेंट) के बीच अंतर (पहले से ही) फ़ंक्शन

Answer 3

से jQuery एपीआई दस्तावेज़

जबकि जावास्क्रिप्ट loadएक पृष्ठ प्रदान किए जाने पर कोड निष्पादित करने के लिए घटना प्रदान करता है, यह घटना तब तक ट्रिगर नहीं होती है जब तक कि सभी संपत्तियां जैसे कि छवियां पूरी तरह से प्राप्त नहीं हो जाती हैं। ज्यादातर मामलों में, स्क्रिप्ट को चलाया जा सकता है जैसे ही DOM पदानुक्रम का पूरी तरह से निर्माण किया गया है। .ready()DOM तैयार होने के बाद जिस हैंडलर को पारित किया जाता है, उसे निष्पादित करने की गारंटी दी जाती है, इसलिए यह आमतौर पर अन्य सभी इवेंट हैंडलर को संलग्न करने और अन्य jQuery कोड चलाने के लिए सबसे अच्छी जगह है। स्क्रिप्ट का उपयोग करते समय जो सीएसएस शैली के गुणों के मूल्य पर भरोसा करते हैं, स्क्रिप्ट को संदर्भित करने से पहले बाहरी स्टाइलशीट को संदर्भित करना या शैली तत्वों को एम्बेड करना महत्वपूर्ण है।

उन मामलों में जहां कोड लोड की गई संपत्तियों पर निर्भर करता है (उदाहरण के लिए, यदि किसी छवि के आयाम आवश्यक हैं), तो कोड को loadइसके बजाय घटना के लिए एक हैंडलर में रखा जाना चाहिए ।

---

दूसरे प्रश्न का उत्तर -

नहीं, वे तब तक समान हैं जब तक आप बिना किसी संघर्ष मोड में jQuery का उपयोग नहीं कर रहे हैं।

Answer 4

यह तीन फ़ंक्शन समान हैं।

$(document).ready(function(){

}) 

तथा

$(function(){

}); 

तथा

jQuery(document).ready(function(){

});

यहाँ $परिभाषित के लिए प्रयोग किया जाता है jQueryजैसे $= jQuery।

अब अंतर यह है कि

$(document).readyjQuery की घटना है जो DOMलोड होने पर निकाल दी जाती है, इसलिए दस्तावेज़ संरचना तैयार होने पर इसे निकाल दिया जाता है।

$(window).load संपूर्ण सामग्री लोड होने के बाद घटना को निकाल दिया जाता है जैसे पृष्ठ में चित्र, सीएसएस आदि होते हैं।

Answer 5

के बीच अंतर $(document).ready()और $(window).load()कार्य यह है कि अंदर शामिल कोड $(window).load()एक बार पूरे पृष्ठ (चित्र, iframes, स्टाइलशीट, आदि) लोड हो जाएगा, जबकि दस्तावेज़ तैयार घटना सभी छवियों, iframes आदि लोड होने से पहले आग लग जाती है, लेकिन पूरे DOM के बाद ही तैयार है।

---

$(document).ready(function(){

}) 

तथा

$(function(){

});

तथा

jQuery(document).ready(function(){

});

उपरोक्त 3 कोडों में कोई अंतर नहीं है।

वे समतुल्य हैं, लेकिन अगर किसी अन्य जावास्क्रिप्ट फ्रेमवर्क में शॉर्टकट नाम के समान डॉलर के प्रतीक $ का उपयोग किया जाता है, तो आपको संघर्ष का सामना करना पड़ सकता है ।

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

Comments

JQuery (दस्तावेज़) के बीच अंतर। पहले से ही (फ़ंक्शन () {और jQuery (दस्तावेज़)। पहले से ही (फ़ंक्शन ($) {) कोष्ठक के अंदर $ नोट करें।

— MarcoZen

Answer 6

तैयार घटना हमेशा केवल HTML पृष्ठ पर निष्पादित होती है जिसे ब्राउज़र पर लोड किया जाता है और कार्यों को निष्पादित किया जाता है .... लेकिन लोड घटना को सभी पृष्ठ सामग्री के समय निष्पादित किया जाता है जो पृष्ठ के लिए ब्राउज़र पर लोड होता है ... .. हम jquery स्क्रिप्ट में noconflict () विधि का उपयोग करते समय $ या jQuery का उपयोग कर सकते हैं ...

Answer 7

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

Comments

कृपया अपना उत्तर भी बताएं।

— ब्लैकबर्ड

Answer 8

$ (विंडो) .लोड एक ऐसी घटना है जो आग लग जाती है जब पृष्ठ पर डोम और सभी सामग्री (सब कुछ) पूरी तरह से सीएसएस, चित्र और फ्रेम की तरह लोड होती है। एक सबसे अच्छा उदाहरण है अगर हम वास्तविक छवि का आकार प्राप्त करना चाहते हैं या किसी भी चीज़ का विवरण प्राप्त करना चाहते हैं जिसका हम उपयोग करते हैं।

$ (दस्तावेज़)। डियर () इंगित करता है कि डोम लोड होने और स्क्रिप्ट द्वारा हेरफेर करने के लिए तैयार होने के बाद कोड को उसमें निष्पादित करने की आवश्यकता है। यह jQuery स्क्रिप्ट निष्पादित करने के लिए छवियों के लोड होने का इंतजार नहीं करेगा।

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$ (खिड़की) .लोड $ (दस्तावेज़) के बाद निकाल दिया। पहले से ही ()।

$(document).ready(function(){

}) 
//and 
$(function(){

}); 
//and
jQuery(document).ready(function(){

});

3 से ऊपर एक ही है, $ jQuery का उपनाम है, अगर किसी अन्य जावास्क्रिप्ट फ्रेमवर्क में समान डॉलर प्रतीक $ का उपयोग किया जाता है, तो आपको संघर्ष का सामना करना पड़ सकता है। यदि यू चेहरा संघर्ष jQuery टीम एक समाधान प्रदान करते हैं तो संघर्ष अधिक पढ़ा जाता है।

$ (खिड़की) .लोड 1.8 में पदावनत किया गया, और jquery 3.0 में हटा दिया गया