$ (विंडो)। लोड () और $ (दस्तावेज़) के बीच अंतर। पहले से ही () फ़ंक्शन


216

JQuery में $(window).load(function() {})और क्या अंतर है $(document).ready(function() {})?

जवाबों:


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

38
के लिए आशुलिपि $(document).ready(function(){})है $(function(){})और window.load से एक और महत्वपूर्ण अंतर यह है कि यह आरंभिक DOM DOM के बाद भी फ़ंक्शन के सभी भविष्य के कॉल पर चलेगा।
माइकल बटलर

2
@ डब्लिस हां मेरा मानना ​​है कि ऑनलोड शॉर्टहैंड है $(window).on('load')। दोनों लोड घटना को संदर्भित करते हैं ।
फ्री लांसर

5
@MichaelButler - आपका क्या मतलब है it will run on ALL future calls of the function?
बॉर्नटूकोड

7
@MichaelButler: आपको अपनी टिप्पणी में अधिक स्पष्ट होने की आवश्यकता है। 1) आप $(document).readyDOM तैयार होने के बाद USER के बारे में अधिक कोड निष्पादित करने के बारे में बात कर रहे हैं । यह इतना छोटा उपयोग मामला है कि शायद यह उल्लेख करने के साथ हर किसी को भ्रमित करने के लायक नहीं था। 2) पर्यावरण केवल $(document).ready(f‌​unction(){})एक बार कॉल करता है , जब DOM तैयार होता है। यदि उपयोगकर्ता, किसी कारण से, $(document).readyDOM तैयार होने के बाद अधिक निष्पादित करता है, तो हाँ, इसे तुरंत निष्पादित किया जाएगा।
डग एस

4
मैं अलग करने के लिए भीख माँगती हूँ, माइकल। आइए इसे इस पर छोड़ें और बेकार की टिप्पणियों पर ध्यान न दें। कम से कम भ्रमित लोगों के पास अब उनका जवाब है।
डग एस

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


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

22

$(window).load()JQuery 3.0 में उपलब्ध नहीं है

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

इसके चारों ओर पाने के लिए, आप इसे "इवेंट हैंडलर अटैचमेंट" के रूप में उपयोग कर सकते हैं

$( window ).on("load", function() {
        // Handler for .load() called.
});

14

अंतर हैं:

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

$(window).load() पूरी सामग्री लोड होने के बाद घटना को निकाल दिया जाता है।


9
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

सभी iframe सामग्री लोड होने के बाद window.load को ट्रिगर किया जाएगा


7

$(document).ready तब होता है जब सभी तत्व DOM में मौजूद होते हैं, लेकिन जरूरी नहीं कि सभी सामग्री।

$(document).ready(function() {
    alert("document is ready");
});

window.onloadया $(window).load()सभी सामग्री संसाधनों (चित्र, आदि) लोड होने के बाद होता है।

$(window).load(function() {
    alert("window is loaded");
});


0

डॉक्यूमेंट। पहले से ही (jQuery) डॉक्यूमेंट। HTML डॉक्यूमेंट लोड होने के बाद डॉक्यूमेंट पहले ही निष्पादित हो जाएगा, और DOM तैयार है।

DOM: द डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) HTML, XHTML और XML डॉक्यूमेंट में ऑब्जेक्ट्स के साथ प्रतिनिधित्व और इंटरैक्ट करने के लिए एक क्रॉस-प्लेटफॉर्म और भाषा-स्वतंत्र सम्मेलन है।

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load (अंतर्निहित जावास्क्रिप्ट) window.load हालांकि पृष्ठ के पूरी तरह से लोड होने का इंतजार करेगा, इसमें आंतरिक फ़्रेम, चित्र आदि शामिल हैं। * window.load एक अंतर्निहित जावास्क्रिप्ट विधि है, इसे कुछ के लिए जाना जाता है। पुराने ब्राउज़रों (IE6, IE8, पुराने FF और ओपेरा संस्करणों) में quirks लेकिन आम तौर पर उन सभी में काम करेंगे।

window.load को इस तरह से बॉडी के ऑनलोड इवेंट में इस्तेमाल किया जा सकता है (लेकिन मैं दृढ़ता से आपको HTML में इस तरह कोड मिलाने से बचना चाहूंगा, क्योंकि यह बाद में भ्रम का स्रोत है):

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});

0

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

$ (दस्तावेज़)। डियर () इंगित करता है कि डोम लोड होने और स्क्रिप्ट द्वारा हेरफेर करने के लिए तैयार होने के बाद कोड को उसमें निष्पादित करने की आवश्यकता है। यह 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>

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

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


0

मुझे लगता है कि $(window).loadघटना JQuery 3.x द्वारा समर्थित नहीं है


1
के अनुसार प्रलेखन $ (विंडो) .load घटना JQuery 3.0 में हटा दिया गया था
मैथ्यु VIALES

1
यह सही है। इसे प्राप्त करने के लिए, आप इसे "ईवेंट हैंडलर अटैचमेंट": $ (विंडो) .on ("लोड", फंक्शन () {// हैंडलर फॉर। लोड () कहा जाता है} के रूप में उपयोग कर सकते हैं;
कीन

0

DOM लेवल 2 इवेंट्स के मुताबिक, इस loadइवेंट में आग लगने वाली है document, चालू नहीं window। हालांकि, पीछे की संगतता के लिए सभी ब्राउज़रों में loadलागू किया windowगया है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.