मैं एक बाहरी स्क्रिप्ट निष्पादित कर रहा हूं, <script>अंदर का उपयोग करके <head>।
अब चूंकि पृष्ठ लोड होने से पहले स्क्रिप्ट निष्पादित होती है , इसलिए मैं <body>अन्य चीजों के अलावा, इस तक नहीं पहुंच सकता । दस्तावेज़ "लोड" होने के बाद मैं कुछ जावास्क्रिप्ट निष्पादित करना चाहता हूं (HTML पूरी तरह से डाउनलोड किया गया और इन-रैम)। क्या कोई ऐसी घटना है जिसे मैं अपनी स्क्रिप्ट के निष्पादन पर हुक कर सकता हूं, जो पृष्ठ लोड पर ट्रिगर हो जाएगा?
जवाबों:
ये उपाय काम करेंगे:
<body onload="script();">या
document.onload = function ...या और भी
window.onload = function ...ध्यान दें कि अंतिम विकल्प एक बेहतर तरीका है क्योंकि यह बिना सोचे - समझे है और इसे अधिक मानक माना जाता है ।
document.onload=गैर निकला हुआ है en.wikipedia.org/wiki/Unobtrusive_JavaScript
उचित रूप से पोर्टेबल, आपकी स्क्रिप्ट होने का गैर-ढांचा तरीका, लोड समय पर चलने के लिए एक फ़ंक्शन सेट करता है:
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;
}
}
इस घटना को निकाल दिया जाता है जब प्रारंभिक एचटीएमएल दस्तावेज़ को लोड करने के लिए स्टाइलशीट, चित्र और सबफ़्रेम की प्रतीक्षा किए बिना, पूरी तरह से लोड और पार्स किया गया है । इस स्तर पर आप उपयोगकर्ता डिवाइस या बैंडविड्थ की गति के आधार पर छवियों और सीएसएस के लोडिंग को प्रोग्रामेटिक रूप से अनुकूलित कर सकते हैं।
DOM लोड होने के बाद (img और css से पहले) एक्ज़ीक्यूट:
document.addEventListener("DOMContentLoaded", function(){
//....
});
नोट: सिंक्रोनस जावास्क्रिप्ट डोम के पार्सिंग को रोक देता है। यदि आप चाहते हैं कि उपयोगकर्ता द्वारा पेज का अनुरोध करने के बाद DOM जितना जल्दी संभव हो सके, तो आप अपने जावास्क्रिप्ट को अतुल्यकालिक चालू कर सकते हैं और स्टाइलशीट के लोडिंग को ऑप्टिमाइज़ कर सकते हैं।
एक बहुत ही अलग घटना, भार , का उपयोग केवल एक पूर्ण-लोड किए गए पृष्ठ का पता लगाने के लिए किया जाना चाहिए । यह लोड का उपयोग करने के लिए एक अविश्वसनीय रूप से लोकप्रिय गलती है जहां DOMContentLoaded बहुत अधिक उपयुक्त होगी, इसलिए सतर्क रहें।
सब कुछ लोड होने और पार्स होने के बाद उम्मीदें:
window.addEventListener("load", function(){
// ....
});
MDN संसाधन:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
सभी घटनाओं की एमडीएन सूची:
window.onload = ...यह सोचने की कोशिश की कि मेरी स्क्रिप्ट तब तक इंतजार करेगी जब तक चलने से पहले सब कुछ पूरी तरह से डाउनलोड न हो जाए, लेकिन ऐसा लगता है कि window.onloadवास्तव में ऐसा व्यवहार करता है document.addEventListener("DOMContentLoaded", ..., जबकि window.addEventListener("load", ...वास्तव में सब कुछ पूरी तरह से डाउनलोड होने का इंतजार करता है। मैं सोचा कि होता window.onloadके बराबर होना चाहिए window.addEventListener("load", ...बजाय document.addEventListener("DOMContentLoaded", ...?? मुझे क्रोम और एफएफ में समान परिणाम मिला।
आप शरीर के अंदर "ऑनलोड" विशेषता रख सकते हैं
...<body onload="myFunction()">...या यदि आप jQuery का उपयोग कर रहे हैं, तो आप कर सकते हैं
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })मुझे आशा है कि यह आपके प्रश्न का उत्तर देगा।
ध्यान दें कि आपके पृष्ठ पर दस्तावेज़ प्रदान किए जाने के बाद $ (विंडो) .लोड निष्पादित होगा।
यदि <head>दस्तावेज़ के भीतर स्क्रिप्ट लोड की जाती हैं , तो यह संभव है कि deferस्क्रिप्ट टैग में विशेषता का उपयोग करें ।
उदाहरण:
<script src="demo_defer.js" defer></script>से https://developer.mozilla.org :
आस्थगित करें
यह बूलियन विशेषता एक ब्राउज़र को इंगित करने के लिए सेट की गई है कि दस्तावेज़ को पार्स किए जाने के बाद स्क्रिप्ट निष्पादित करने के लिए होती है, लेकिन DOMContentLoaded को फायर करने से पहले।
यदि src विशेषता अनुपस्थित है (यानी इनलाइन स्क्रिप्ट के लिए), तो इस विशेषता का उपयोग नहीं किया जाना चाहिए, इस मामले में इसका कोई प्रभाव नहीं होगा।
गतिशील रूप से सम्मिलित स्क्रिप्ट के लिए एक समान प्रभाव प्राप्त करने के लिए इसके बजाय async = false का उपयोग करें। आस्थगित विशेषता के साथ लिपियों को उस क्रम में निष्पादित किया जाएगा जिसमें वे दस्तावेज़ में दिखाई देते हैं।
पृष्ठ लोड होने के बाद आस्थगित js लोडिंग पर आधारित स्क्रिप्ट यहाँ है,
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>मैं इसे कहां रखूं?
</body>टैग के ठीक पहले (अपने HTML फ़ाइल के निचले भाग के पास) अपने HTML में कोड पेस्ट करें ।
यह क्या करता है?
यह कोड कहता है कि पूरे दस्तावेज़ को लोड करने के लिए प्रतीक्षा करें, फिर बाहरी फ़ाइल को लोड करें
deferredfunctions.js।
यहाँ उपरोक्त कोड का एक उदाहरण है - जेएस का डिफर रेंडरिंग
मैंने इसे javascript Pagespeed google कॉन्सेप्ट के डिफरेंट लोडिंग पर आधारित लिखा था और इस आर्टिकल से भी डिफर किया गया Defer लोड हो रहा है जावास्क्रिप्ट
हुकिंग में document.onloadया jQuery में देखें $(document).load(...)।
कार्य फिडल पर<body onload="myFunction()">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction(){
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html><script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>http://www.feedthebot.com/pagespeed/defer-loading-javascript.html
यदि आप jQuery का उपयोग कर रहे हैं,
$(function() {...});
के बराबर है
$(document).ready(function () { })
या दूसरा छोटा हाथ:
$().ready(function () { })
देखें कि JQuery के $ फंक्शन () में कौन सी घटना होती है? और https://api.jquery.com/ready/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}यहाँ देखें: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
मैं कभी-कभी अधिक जटिल पृष्ठों पर पाता हूं कि सभी तत्वों ने समय खिड़की से लोड नहीं किया है। लोड किया जाता है। यदि ऐसा है, तो अपने कार्य में देरी होने से पहले सेटटाइमआउट जोड़ें। यह सुरुचिपूर्ण नहीं है, लेकिन यह एक सरल हैक है जो अच्छी तरह से प्रस्तुत करता है।
window.onload = function(){ doSomethingCool(); };हो जाता है ...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };बस परिभाषित करें <body onload="aFunction()">कि पृष्ठ लोड होने के बाद कहा जाएगा। स्क्रिप्ट में आपका कोड संलग्न है aFunction() { }।
<body onload="myFunction()">यह कोड अच्छी तरह से काम करता है।
लेकिन window.onloadविधि में विभिन्न निर्भरताएं हैं। तो यह हर समय काम नहीं कर सकता है।
YUI लाइब्रेरी का उपयोग करना (मुझे यह पसंद है):
YAHOO.util.Event.onDOMReady(function(){
//your code
});पोर्टेबल और सुंदर! हालाँकि, यदि आप अन्य सामानों के लिए यूयूआई का उपयोग नहीं करते हैं (इसका डॉक देखें) मैं कहूंगा कि यह इसका उपयोग करने के लायक नहीं है।
NB: इस कोड का उपयोग करने के लिए आपको 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>कैसे जावास्क्रिप्ट या 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 का उपयोग केवल तभी चेक करने के लिए जब DOM तैयार है
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});यह देखने के लिए कि क्या सभी संसाधन लोड किए गए हैं window.load का उपयोग करें
$( window ).load(function() {
console.log( "window loaded" );
});इस कोड का उपयोग jQuery लाइब्रेरी के साथ करें, यह पूरी तरह से ठीक काम करेगा।
$(window).bind("load", function() {
// your javascript event
});$(window).on("load", function(){ ... });पहले से ही () मेरे लिए सबसे अच्छा काम करता है।
$(document).ready(function(){ ... });.load () काम करेगा, लेकिन पेज लोड होने तक इंतजार नहीं करेगा।
jQuery(window).load(function () { ... });मेरे लिए काम नहीं करता, अगली-इनलाइन स्क्रिप्ट को तोड़ता है। मैं jQuery 3.2.1 का उपयोग कुछ अन्य jQuery कांटे के साथ भी कर रहा हूं।
ओवरले लोड करने वाली अपनी वेबसाइटों को छिपाने के लिए, मैं निम्नलिखित का उपयोग करता हूं:
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>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");
}
});$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});नोट: - नीचे दिए गए मार्कअप का उपयोग न करें (क्योंकि यह अन्य समान तरह की घोषणाओं को ओवरराइट करता है):
document.onreadystatechange = ...जैसा कि डैनियल कहते हैं, आप दस्तावेज़ का उपयोग कर सकते हैं। लोड करें।
विभिन्न javascript फ्रेमवर्क hwoever (jQuery, Mootools, इत्यादि) एक कस्टम इवेंट 'डोमेर्ड' का उपयोग करते हैं, जो मुझे लगता है कि अधिक प्रभावी होना चाहिए। यदि आप जावास्क्रिप्ट के साथ विकसित कर रहे हैं, तो मैं अत्यधिक रूपरेखा का दोहन करने की सलाह दूंगा, वे बड़े पैमाने पर आपकी उत्पादकता बढ़ाते हैं।
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>मेरी सलाह है कि asnycस्क्रिप्ट टैग के लिए विशेषता का उपयोग करें जो आपको पृष्ठ लोड होने के बाद बाहरी स्क्रिप्ट को लोड करने में मदद करेंगे
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>deferबजाय इसका मतलब है , @Daniel मूल्य का उल्लेख किया?
आत्म निष्पादन ऑनलोड फ़ंक्शन का उपयोग करें
window.onload = function (){
/* statements */
}(); onloadइस दृष्टिकोण का उपयोग करके अन्य हैंडलर को ओवरराइड कर सकते हैं । इसके बजाय, आपको श्रोता को जोड़ना चाहिए।