javascript - पेज लोड के बाद निष्पादित जावास्क्रिप्ट




html javascript-events (16)

ध्यान रखें कि पृष्ठ लोड करने में एक से अधिक चरण हैं। बीटीडब्ल्यू, यह शुद्ध जावास्क्रिप्ट है

"DOMContentLoaded"

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

डोम लोड होने के बाद पता (आईएमजी और सीएसएस से पहले):

document.addEventListener("DOMContentLoaded", function(){
    //....
});

नोट: सिंक्रोनस जावास्क्रिप्ट डीओएम के पार्सिंग को रोकता है। यदि आप पृष्ठ को अनुरोध करने के बाद डीओएम जितनी जल्दी हो सके पार्स करना चाहते हैं, तो आप अपनी जावास्क्रिप्ट को असीमित कर सकते हैं और स्टाइलशीट की लोडिंग अनुकूलित कर सकते हैं

"भार"

एक बहुत ही अलग घटना, भार , केवल पूरी तरह से लोड पृष्ठ का पता लगाने के लिए इस्तेमाल किया जाना चाहिए। लोड का उपयोग करने के लिए यह एक अविश्वसनीय रूप से लोकप्रिय गलती है जहां DOMContentLoaded अधिक उपयुक्त होगा, इसलिए सावधान रहें।

सबकुछ लोड होने और पार्स किए जाने के बाद पता चलता है:

window.addEventListener("load", function(){
    // ....
});

एमडीएन संसाधन:

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

सभी घटनाओं की एमडीएन सूची:

https://developer.mozilla.org/en-US/docs/Web/Events

मैं <script> अंदर <head> का उपयोग कर बाहरी स्क्रिप्ट निष्पादित कर रहा हूं।

अब जब पृष्ठ लोड होने से पहले स्क्रिप्ट निष्पादित हो जाती है, तो मैं अन्य चीज़ों के साथ <body> तक नहीं पहुंच सकता। दस्तावेज "लोड" (एचटीएमएल पूरी तरह से डाउनलोड और इन-रैम) के बाद मैं कुछ जावास्क्रिप्ट निष्पादित करना चाहता हूं। क्या कोई ऐसी घटनाएं हैं जिन पर मैं अपनी स्क्रिप्ट निष्पादित करता हूं, जो पृष्ठ लोड पर ट्रिगर हो जाएंगे?


// यह परीक्षण और काम कर रहा है :)

$ (दस्तावेज़) .ready (function () {functon1 (); function2 ()});


JQuery कोड के साथ इस कोड का प्रयोग करें, यह पूरी तरह से ठीक काम करेगा।

$(window).bind("load", function() { 

  // your javascript event

});

आप शरीर के अंदर "अधिभार" विशेषता डाल सकते हैं

...<body onload="myFunction()">...

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

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

or 

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

मुझे उम्मीद है कि यह आपके प्रश्न का उत्तर देगा।

ध्यान दें कि आपके पृष्ठ पर दस्तावेज़ प्रस्तुत किए जाने के बाद $ (विंडो) .load निष्पादित होगा।


जावास्क्रिप्ट या Jquery का उपयोग कर दस्तावेज़ लोड होने पर यह पता लगाने के लिए एक बहुत अच्छा प्रलेखन है।

देशी जावास्क्रिप्ट का उपयोग करके यह हासिल किया जा सकता है

if (document.readyState === "complete") {
 init();
 }

यह अंतराल के अंदर भी किया जा सकता है

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

मोज़िला द्वारा

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

Jquery का उपयोग केवल तभी जांचें जब डोम तैयार हो

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

यह जांचने के लिए कि क्या सभी संसाधन लोड किए गए हैं window.load का उपयोग करें

 $( window ).load(function() {
        console.log( "window loaded" );
    });

जैसा कि डैनियल कहते हैं, आप दस्तावेज़ का उपयोग कर सकते हैं।

विभिन्न जावास्क्रिप्ट ढांचे hwoever (jQuery, Mootools, आदि) एक कस्टम घटना 'domready' का उपयोग करें, जो मुझे लगता है कि अधिक प्रभावी होना चाहिए। यदि आप जावास्क्रिप्ट के साथ विकास कर रहे हैं, तो मैं अत्यधिक ढांचे का शोषण करने की सिफारिश करता हूं, वे आपकी उत्पादकता में बड़े पैमाने पर वृद्धि करते हैं।


बस <body onload="aFunction()"> को परिभाषित करें जिसे पृष्ठ लोड होने के बाद बुलाया जाएगा। स्क्रिप्ट में आपका कोड एक aFunction() { } से संलग्न है।


मुझे कभी-कभी अधिक जटिल पृष्ठों पर लगता है कि सभी तत्व समय खिड़की से लोड नहीं होते हैं। लोड को निकाल दिया जाता है। यदि ऐसा है, तो आपके फ़ंक्शन में देरी से पहले सेटटाइमआउट जोड़ें एक पल है। यह सुरुचिपूर्ण नहीं है लेकिन यह एक साधारण हैक है जो अच्छी तरह से प्रस्तुत करता है।

window.onload = function(){ doSomethingCool(); };

हो जाता है ...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };


यदि स्क्रिप्ट को दस्तावेज़ के <head> में लोड किया जाता है, तो यह संभव है स्क्रिप्ट टैग में defer विशेषता का उपयोग करें।

उदाहरण:

<script src="demo_defer.js" defer></script>

https://developer.mozilla.org :

टालना

यह बूलियन विशेषता ब्राउज़र को इंगित करने के लिए सेट है कि दस्तावेज़ को पार्स किए जाने के बाद स्क्रिप्ट को निष्पादित किया जाना है, लेकिन DOMContentLoaded को फायर करने से पहले।

यदि विशेषता विशेषता अनुपस्थित है (यानी इनलाइन स्क्रिप्ट के लिए), तो इस विशेषता का कोई प्रभाव नहीं होगा।

गतिशील रूप से सम्मिलित स्क्रिप्ट के लिए एक समान प्रभाव प्राप्त करने के लिए async = false का उपयोग करें। डिफर विशेषता के साथ स्क्रिप्ट्स उस क्रम में निष्पादित होंगी जिसमें वे दस्तावेज़ में दिखाई देते हैं।


लोड समय पर चलाने के लिए आपकी स्क्रिप्ट को फ़ंक्शन सेट करने का उचित पोर्टेबल, गैर-ढांचा तरीका:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

स्वयं निष्पादन अधिभार समारोह का उपयोग करें

window.onload = function (){
    /* statements */
}();   

यूयूआई लाइब्रेरी का उपयोग करना (मुझे यह पसंद है):

YAHOO.util.Event.onDOMReady(function(){
    //your code
});

पोर्टेबल और सुंदर! हालांकि, अगर आप अन्य सामानों के लिए यूयूआई का उपयोग नहीं करते हैं (इसके डॉक्टर को देखें) तो मैं कहूंगा कि इसका उपयोग करने योग्य नहीं है।

एनबी: इस कोड का उपयोग करने के लिए आपको 2 स्क्रिप्ट आयात करने की आवश्यकता है

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>

$ (विंडो) .on ("लोड", फ़ंक्शन () {...});

मेरे लिए सबसे अच्छा काम करता है।

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

काम करेगा, लेकिन पेज लोड होने तक यह इंतजार नहीं करेगा।

jQuery(window).load(function () { ... }

मेरे लिए काम नहीं करता है, अगली-इनलाइन लिपि को तोड़ देता है। मैं कुछ अन्य jQuery फोरक्स के साथ jQuery 3.2.1 का भी उपयोग कर रहा हूं।

ओवरले लोड करने वाली मेरी वेबसाइटों को छिपाने के लिए, मैं निम्न का उपयोग करता हूं:

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event

)};
</script>


<body onload="myFunction()">

यह कोड अच्छी तरह से काम करता है।

लेकिन window.onload विधि में विभिन्न निर्भरताएं हैं। तो यह हर समय काम नहीं कर सकता है।






pageload