दिलचस्प पोस्ट
ASP.NET MVC में त्रुटि हैंडलिंग पायथन में संस्करण स्ट्रिंग की तुलना करें कैसे दो निर्दिष्ट तारीख के बीच की तारीखों को खोजने के लिए? यूके पोस्टकोड रेगेक्स (व्यापक) स्ट्रिंग से एचटीएमएल टैग को हटाने के लिए नियमित अभिव्यक्ति आप टेक्स्टरिए में कर्सर की स्थिति कैसे प्राप्त करते हैं? स्थानीय XML स्कीमा फ़ाइल को सही तरीके से संदर्भ कैसे करें? क्वेरी के साथ मौजूदा तालिकाओं के लिए SQL बनाएँ लिपियों उत्पन्न करें वॉचकिट एक्सटेंशन – कोई मिलती-जुलती प्रावधान प्रोफ़ाइल नहीं मिली बुफ़र्ड फाइलें (तेज डिस्क एक्सेस के लिए) Google मानचित्र रिलीज एपीआई कुंजी उत्पन्न करना अद्वितीय (गैर दोहराए जाने) वर्णों के साथ एक शब्द से मेल करने के लिए regex कैसे (फ़ंक्शन () {}) () काम का निर्माण और क्यों लोग इसका उपयोग करते हैं? MySQL पूर्णांक फ़ील्ड को PHP में स्ट्रिंग के रूप में लौटाया गया है XML के माध्यम से क्लिक करके एक एंड्रॉइड बटन बदलें पृष्ठभूमि बनाएं

$ (दस्तावेज़) .अन्य jQuery के बिना बराबर

मेरे पास एक स्क्रिप्ट है जो $(document).ready का उपयोग करता है। $(document).ready , लेकिन यह jQuery से कुछ भी उपयोग नहीं करता है मैं jQuery निर्भरता को निकालकर इसे हल्का करना चाहता हूं।

मैं अपने स्वयं के $(document).ready कैसे लागू कर सकता हूँ। JQuery का उपयोग किए बिना कार्यक्षमता? मुझे पता है कि window.onload का उपयोग window.onload के समान नहीं होगा। सभी छवियों, फ्रेम, आदि के बाद लोड होने पर लोड हो चुके हैं।

वेब के समाधान से एकत्रित समाधान "$ (दस्तावेज़) .अन्य jQuery के बिना बराबर"

एक मानक आधारित प्रतिस्थापन है, जो DOMContentLoaded है, जो ब्राउजरों के 98% से अधिक समर्थित है, यद्यपि IE8 नहीं है:

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

jQuery का देशी फ़ंक्शन सिर्फ विंडो से अधिक जटिल है। डाउनलोड, जैसा कि नीचे दर्शाया गया है।

 function bindReady(){ if ( readyBound ) return; readyBound = true; // Mozilla, Opera and webkit nightlies currently support this event if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", function(){ document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); jQuery.ready(); }, false ); // If IE event model is used } else if ( document.attachEvent ) { // ensure firing before onload, // maybe late but safe also for iframes document.attachEvent("onreadystatechange", function(){ if ( document.readyState === "complete" ) { document.detachEvent( "onreadystatechange", arguments.callee ); jQuery.ready(); } }); // If IE and not an iframe // continually check to see if the document is ready if ( document.documentElement.doScroll && window == window.top ) (function(){ if ( jQuery.isReady ) return; try { // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left"); } catch( error ) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions jQuery.ready(); })(); } // A fallback to window.onload, that will always work jQuery.event.add( window, "load", jQuery.ready ); } 

चूंकि स्वीकार्य जवाब पूरी तरह से बहुत दूर था, मैंने एक "तैयार" समारोह को एक साथ सिले लगाया जैसे jQuery.ready() jQuery 1.6.2 स्रोत पर आधारित: स्रोत:

 var ready = (function(){ var readyList, DOMContentLoaded, class2type = {}; class2type["[object Boolean]"] = "boolean"; class2type["[object Number]"] = "number"; class2type["[object String]"] = "string"; class2type["[object Function]"] = "function"; class2type["[object Array]"] = "array"; class2type["[object Date]"] = "date"; class2type["[object RegExp]"] = "regexp"; class2type["[object Object]"] = "object"; var ReadyObj = { // Is the DOM ready to be used? Set to true once it occurs. isReady: false, // A counter to track how many items to wait for before // the ready event fires. See #6781 readyWait: 1, // Hold (or release) the ready event holdReady: function( hold ) { if ( hold ) { ReadyObj.readyWait++; } else { ReadyObj.ready( true ); } }, // Handle when the DOM is ready ready: function( wait ) { // Either a released hold or an DOMready/load event and not yet ready if ( (wait === true && !--ReadyObj.readyWait) || (wait !== true && !ReadyObj.isReady) ) { // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). if ( !document.body ) { return setTimeout( ReadyObj.ready, 1 ); } // Remember that the DOM is ready ReadyObj.isReady = true; // If a normal DOM Ready event fired, decrement, and wait if need be if ( wait !== true && --ReadyObj.readyWait > 0 ) { return; } // If there are functions bound, to execute readyList.resolveWith( document, [ ReadyObj ] ); // Trigger any bound ready events //if ( ReadyObj.fn.trigger ) { // ReadyObj( document ).trigger( "ready" ).unbind( "ready" ); //} } }, bindReady: function() { if ( readyList ) { return; } readyList = ReadyObj._Deferred(); // Catch cases where $(document).ready() is called after the // browser event has already occurred. if ( document.readyState === "complete" ) { // Handle it asynchronously to allow scripts the opportunity to delay ready return setTimeout( ReadyObj.ready, 1 ); } // Mozilla, Opera and webkit nightlies currently support this event if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); // A fallback to window.onload, that will always work window.addEventListener( "load", ReadyObj.ready, false ); // If IE event model is used } else if ( document.attachEvent ) { // ensure firing before onload, // maybe late but safe also for iframes document.attachEvent( "onreadystatechange", DOMContentLoaded ); // A fallback to window.onload, that will always work window.attachEvent( "onload", ReadyObj.ready ); // If IE and not a frame // continually check to see if the document is ready var toplevel = false; try { toplevel = window.frameElement == null; } catch(e) {} if ( document.documentElement.doScroll && toplevel ) { doScrollCheck(); } } }, _Deferred: function() { var // callbacks list callbacks = [], // stored [ context , args ] fired, // to avoid firing when already doing so firing, // flag to know if the deferred has been cancelled cancelled, // the deferred itself deferred = { // done( f1, f2, ...) done: function() { if ( !cancelled ) { var args = arguments, i, length, elem, type, _fired; if ( fired ) { _fired = fired; fired = 0; } for ( i = 0, length = args.length; i < length; i++ ) { elem = args[ i ]; type = ReadyObj.type( elem ); if ( type === "array" ) { deferred.done.apply( deferred, elem ); } else if ( type === "function" ) { callbacks.push( elem ); } } if ( _fired ) { deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] ); } } return this; }, // resolve with given context and args resolveWith: function( context, args ) { if ( !cancelled && !fired && !firing ) { // make sure args are available (#8421) args = args || []; firing = 1; try { while( callbacks[ 0 ] ) { callbacks.shift().apply( context, args );//shifts a callback, and applies it to document } } finally { fired = [ context, args ]; firing = 0; } } return this; }, // resolve with this as context and given arguments resolve: function() { deferred.resolveWith( this, arguments ); return this; }, // Has this deferred been resolved? isResolved: function() { return !!( firing || fired ); }, // Cancel cancel: function() { cancelled = 1; callbacks = []; return this; } }; return deferred; }, type: function( obj ) { return obj == null ? String( obj ) : class2type[ Object.prototype.toString.call(obj) ] || "object"; } } // The DOM ready check for Internet Explorer function doScrollCheck() { if ( ReadyObj.isReady ) { return; } try { // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left"); } catch(e) { setTimeout( doScrollCheck, 1 ); return; } // and execute any waiting functions ReadyObj.ready(); } // Cleanup functions for the document ready method if ( document.addEventListener ) { DOMContentLoaded = function() { document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); ReadyObj.ready(); }; } else if ( document.attachEvent ) { DOMContentLoaded = function() { // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). if ( document.readyState === "complete" ) { document.detachEvent( "onreadystatechange", DOMContentLoaded ); ReadyObj.ready(); } }; } function ready( fn ) { // Attach the listeners ReadyObj.bindReady(); var type = ReadyObj.type( fn ); // Add the callback readyList.done( fn );//readyList is result of _Deferred() } return ready; })(); 

कैसे इस्तेमाल करे:

 <script> ready(function(){ alert('It works!'); }); ready(function(){ alert('Also works!'); }); </script> 

मुझे यकीन नहीं है कि यह कोड कितना कार्यात्मक है, लेकिन यह मेरे सतही परीक्षणों के साथ ठीक काम किया यह काफी समय लगा, इसलिए मैं आशा करता हूं कि आप और दूसरों से इसका फायदा हो सकता है।

पीएस .: मैं इसे संकलित करने का सुझाव देता हूं।

या आप http://dustindiaz.com/smallest-domready-ever का उपयोग कर सकते हैं:

 function r(f){/in/.test(document.readyState)?setTimeout(r,9,f):f()} r(function(){/*code to run*/}); 

या देशी फ़ंक्शन यदि आपको केवल नए ब्राउज़रों का समर्थन करने की आवश्यकता होती है

 document.addEventListener('DOMContentLoaded',function(){/*fun code to run*/}) 

तीन विकल्प:

  1. यदि script शरीर का अंतिम टैग है, तो स्क्रिप्ट टैग निष्पादित होने से पहले DOM तैयार हो जाएगा
  2. जब डोम तैयार हो जाता है, तो "तैयारस्टेट" "पूर्ण" में बदल जाएगा
  3. सब कुछ 'DOMContentLoaded' घटना श्रोता के अधीन रखें

onreadystatechange

  document.onreadystatechange = function () { if (document.readyState == "complete") { // document is ready. Do your stuff here } } 

स्रोत: एमडीएन

DOMContentLoaded

 document.addEventListener('DOMContentLoaded', function() { console.log('document is ready. I can sleep now'); }); 

पत्थर की उम्र के ब्राउज़रों के बारे में चिंतित: jQuery के स्रोत कोड पर जाएं और ready फ़ंक्शन का उपयोग करें। उस स्थिति में आप पूरी लाइब्रेरी को निष्पादित नहीं कर रहे हैं, जो आप कर रहे हैं, आप इसका बहुत ही छोटा हिस्सा कर रहे हैं।

अपने <script>/*JavaScript code*/</script> को बंद करने से पहले </body> टैग रखें।

बेशक, यह हर किसी के प्रयोजनों के अनुरूप नहीं हो सकता है क्योंकि इसके लिए जावास्क्रिप्ट में कुछ करना सिर्फ एक ला document.ready फ़ाइल के बजाय HTML फ़ाइल को बदलने की आवश्यकता है।

गरीब आदमी का समाधान:

 var checkLoad = function() { document.readyState !== "complete" ? setTimeout(checkLoad, 11) : alert("loaded!"); }; checkLoad(); 

देखें बेलाल

यह एक जोड़ा, थोड़ा बेहतर मुझे लगता है, स्वयं के दायरे, और पुनरावर्ती नहीं

 (function(){ var tId = setInterval(function() { if (document.readyState == "complete") onComplete() }, 11); function onComplete(){ clearInterval(tId); alert("loaded!"); }; })() 

देखें बेलाल

मैं इसका उपयोग करता हूं:

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

नोट: यह संभवतः केवल नए ब्राउज़रों के साथ काम करता है, विशेष रूप से ये: http://caniuse.com/#feat=domcontentloaded

वास्तव में, अगर आप केवल इंटरनेट एक्सप्लोरर 9 jQuery.ready बारे में ध्यान रखते हैं, तो यह कोड jQuery.ready को बदलने के लिए पर्याप्त होगा।

  document.addEventListener("DOMContentLoaded", callback); 

यदि आप इंटरनेट एक्सप्लोरर 6 और कुछ बहुत ही अजीब और दुर्लभ ब्राउज़र के बारे में चिंता करते हैं, तो यह काम करेगा:

 domReady: function (callback) { // Mozilla, Opera and WebKit if (document.addEventListener) { document.addEventListener("DOMContentLoaded", callback, false); // If Internet Explorer, the event model is used } else if (document.attachEvent) { document.attachEvent("onreadystatechange", function() { if (document.readyState === "complete" ) { callback(); } }); // A fallback to window.onload, that will always work } else { var oldOnload = window.onload; window.onload = function () { oldOnload && oldOnload(); callback(); } } }, 

मैं हाल ही में एक मोबाइल साइट के लिए इसका उपयोग कर रहा था यह जॉन रेसेग के "प्रो जावास्क्रिप्ट तकनीक" से सरल संस्करण है यह addEvent पर निर्भर करता है

 var ready = ( function () { function ready( f ) { if( ready.done ) return f(); if( ready.timer ) { ready.ready.push(f); } else { addEvent( window, "load", isDOMReady ); ready.ready = [ f ]; ready.timer = setInterval(isDOMReady, 13); } }; function isDOMReady() { if( ready.done ) return false; if( document && document.getElementsByTagName && document.getElementById && document.body ) { clearInterval( ready.timer ); ready.timer = null; for( var i = 0; i < ready.ready.length; i++ ) { ready.ready[i](); } ready.ready = null; ready.done = true; } } return ready; })(); 

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

आपके अनुसार IE8 दस्तावेज़ तैयार स्क्रिप्ट को jquery की आवश्यकता नहीं हो सकती है

 function ready(fn) { if (document.readyState != 'loading') fn(); else if (document.addEventListener) document.addEventListener('DOMContentLoaded', fn); else document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading') fn(); }); } 

JQuery के जवाब मेरे लिए बहुत उपयोगी थे थोड़ा परिष्कृत के साथ मेरी जरूरतों को अच्छी तरह से फिट किया गया मुझे उम्मीद है कि यह किसी और को मदद करता है

 function onReady ( callback ){ var addListener = document.addEventListener || document.attachEvent, removeListener = document.removeEventListener || document.detachEvent eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange" addListener.call(document, eventName, function(){ removeListener( eventName, arguments.callee, false ) callback() }, false ) } 

यहां डोम तैयार करने के लिए सबसे छोटा कोड स्निपेट है जो सभी ब्राउज़रों (यहां तक ​​कि आईई 8) पर काम करता है:

 r(function(){ alert('DOM Ready!'); }); function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()} 

यह उत्तर देखें

क्रॉस-ब्राउज़र (पुराने ब्राउज़र भी) और एक सरल समाधान:

 var docLoaded = setInterval(function () { if(document.readyState !== "complete") return; clearInterval(docLoaded); /* Your code goes here ie init() */ }, 30); 

Jsfiddle में चेतावनी दिखा रहा है

बस इसे अपने HTML पृष्ठ के निचले भाग में जोड़ें …

 <script> Your_Function(); </script> 

क्योंकि, HTML दस्तावेज़ शीर्ष-नीचे से पार्स किए जाते हैं

DOM तैयार होने के बाद यह क्रॉस-ब्राउज़र कोड फ़ंक्शन कॉल करेगा:

 var domReady=function(func){ var scriptText='('+func+')();'; var scriptElement=document.createElement('script'); scriptElement.innerText=scriptText; document.body.appendChild(scriptElement); }; 

यहां देखिए यह कैसे काम करता है:

  1. domReady की पहली पंक्ति domReady के toString विधि को कॉल करता है, जिसमें आप फ़ंक्शन के स्ट्रिंग का प्रतिनिधित्व प्राप्त करते हैं और इसे किसी अभिव्यक्ति में लपेटता है जो फ़ंक्शन को तुरंत कॉल करता है।
  2. बाकी domReady अभिव्यक्ति के साथ एक स्क्रिप्ट तत्व बनाता है और उसे दस्तावेज़ के body में जोड़ता है।
  3. ब्राउज़र DOM के तैयार होने के बाद body संलग्न स्क्रिप्ट टैग चलाता है।

उदाहरण के लिए, यदि आप ऐसा करते हैं: domReady(function(){alert();}); , निम्नलिखित को body तत्व से जोड़ा जाएगा:

  <script>(function (){alert();})();</script> 

ध्यान दें कि यह केवल उपयोगकर्ता द्वारा परिभाषित कार्यों के लिए काम करता है निम्नलिखित कार्य नहीं करेगा: domReady(alert);

यह रॉक सॉलिड ऐडएवेंट () और http://www.braksator.com/how-to-make-your-own-jquery में दिखने योग्य है

अगर साइट नीचे जाती है तो कोड यहाँ है

 function addEvent(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); EventCache.add(obj, type, fn); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent( "on"+type, obj[type+fn] ); EventCache.add(obj, type, fn); } else { obj["on"+type] = obj["e"+type+fn]; } } var EventCache = function(){ var listEvents = []; return { listEvents : listEvents, add : function(node, sEventName, fHandler){ listEvents.push(arguments); }, flush : function(){ var i, item; for(i = listEvents.length - 1; i >= 0; i = i - 1){ item = listEvents[i]; if(item[0].removeEventListener){ item[0].removeEventListener(item[1], item[2], item[3]); }; if(item[1].substring(0, 2) != "on"){ item[1] = "on" + item[1]; }; if(item[0].detachEvent){ item[0].detachEvent(item[1], item[2]); }; item[0][item[1]] = null; }; } }; }(); // Usage addEvent(window, 'unload', EventCache.flush); addEvent(window, 'load', function(){alert("I'm ready");}); 

इस समाधान के बारे में कैसे?

 // other onload attached earlier window.onload=function() { alert('test'); }; tmpPreviousFunction=window.onload ? window.onload : null; // our onload function window.onload=function() { alert('another message'); // execute previous one if (tmpPreviousFunction) tmpPreviousFunction(); }; 

हमें एक त्वरित और गंदे क्रॉस ब्राउज़र कार्यान्वयन मिला है जो न्यूनतम क्रियान्वयन के साथ सबसे सरल मामलों के लिए चाल कर सकता है:

 window.onReady = function onReady(fn){ document.body ? fn() : setTimeout(function(){ onReady(fn);},50); }; 

JQuery के मुकाबले जावास्क्रिप्ट समतुल्य का उपयोग करना हमेशा अच्छा होता है। एक कारण पर निर्भर करने के लिए एक लाइब्रेरी कम है और वे jQuery के बराबर से बहुत तेज हैं।

JQuery के बराबर के लिए एक शानदार संदर्भ http://youmightnotneedjquery.com/ है ।

जहां तक ​​आपके प्रश्न का सवाल है, मैंने ऊपर दिए गए लिंक से नीचे कोड लिया है 🙂 केवल चेतावनी यह है कि यह केवल इंटरनेट एक्सप्लोरर 9 और बाद में काम करता है।

 function ready(fn) { if (document.readyState != 'loading') { fn(); } else { document.addEventListener('DOMContentLoaded', fn); } } 

प्रस्तुत सैटटाइमआउट / सेट इन्टरवाल समाधान केवल विशिष्ट परिस्थितियों में काम करेंगे।

समस्या विशेषकर पुराने इंटरनेट एक्सप्लोरर संस्करणों में 8 तक दिखाई देती है।

इन setTimeout / setInterval समाधान की सफलता को प्रभावित करने वाले चर:

 1) dynamic or static HTML 2) cached or non cached requests 3) size of the complete HTML document 4) chunked or non chunked transfer encoding 

इस विशिष्ट समस्या को हल करने वाला मूल (मूल जावास्क्रिप्ट) कोड यहां है:

 https://github.com/dperini/ContentLoaded http://javascript.nwbox.com/ContentLoaded (test) 

यह वह कोड है जिसमें से jQuery टीम ने अपना कार्यान्वयन बनाया है

यहाँ जो मैं उपयोग करता हूं, यह तेज़ है और मुझे लगता है कि सभी ठिकानों को शामिल किया गया है; IE <9 छोड़कर सब कुछ के लिए काम करता है

 (() => { function fn() { // "On document ready" commands: console.log(document.readyState); }; if (document.readyState != 'loading') {fn()} else {document.addEventListener('DOMContentLoaded', fn)} })(); 

यह सभी मामलों को पकड़ने लगता है:

  • अगर तत्पश्चात् DOM पहले से तैयार है (यदि DOM "लोडिंग" नहीं है, लेकिन "इंटरैक्टिव" या "पूर्ण" है)
  • अगर DOM अभी भी लोड हो रहा है, तो जब DOM उपलब्ध है (इंटरेक्टिव) के लिए एक ईवेंट श्रोता सेट करता है।

DOMContentLoaded घटना IE9 और बाकी सब कुछ में उपलब्ध है, इसलिए मैं व्यक्तिगत तौर पर यह सोचता हूं कि इसका उपयोग करना ठीक है। यदि आप ES2015 से ES5 तक अपना कोड ट्रांसफ़िग नहीं कर रहे हैं, तो एक नियमित गुमनाम समारोह में तीर फ़ंक्शन की घोषणा को फिर से लिखना

यदि आप सभी संपत्ति लोड होने तक इंतजार करना चाहते हैं, तो सभी छवियों आदि प्रदर्शित की जाती हैं तो इसके बजाय window.onload का उपयोग करें।

आईई 9 + के लिए:

 function ready(fn) { if (document.readyState != 'loading'){ fn(); } else { document.addEventListener('DOMContentLoaded', fn); } } 

JQuery में तैयार फ़ंक्शन कई चीज़ों को करता है सच कहूँ तो, मैं इसे बदलने की बात नहीं देखता जब तक कि आप अपनी वेबसाइट से आश्चर्यजनक रूप से छोटा उत्पादन न करें। jQuery एक बहुत ही छोटा पुस्तकालय है, और यह उन सभी प्रकार के क्रॉस-ब्राउज़र चीजों को व्यवस्थित करता है जिन्हें आपको बाद में आवश्यकता होगी।

वैसे भी, यहां पोस्ट करने में थोड़ा सा मुद्दा है, बस jQuery को खोलें और बाइंड रीडी विधि को देखें।

यह या तो दस्तावेज़ मॉडल पर निर्भर करता है, दस्तावेज। AddEventListener ("DOMContentLoaded") या दस्तावेज़ .attachEvent ('onreadystatechange') को कॉल करके शुरू होता है, और वहां से चला जाता है।

यदि आप शरीर के नीचे jQuery को लोड कर रहे हैं, लेकिन आपको jQuery (<func>) या jQuery (दस्तावेज़) को लिखने वाले कोड के साथ परेशानी हो रही है .ready (<func>), जिटीब पर jqshim को देखें।

अपनी स्वयं की दस्तावेज़ तैयार कार्य को पुनः बनाने के बजाय, यह फ़ंक्शन पर बस रखता है जब तक कि jQuery उपलब्ध न हो, तब अपेक्षित रूप से jQuery के साथ आय होती है शरीर के नीचे jQuery को हिलाने का मुद्दा पृष्ठ लोड को गति देना है, और आप अभी भी अपने टेम्पलेट के सिर में jqShim.min.js को इनलाइन करके इसे पूरा कर सकते हैं।

मैंने पावर्ड को वर्डप्रेस में सभी लिपियों को स्थानांतरित करने के लिए इस कोड को लिखना समाप्त कर दिया, और सिर्फ यह शिम कोड अब हेडर में सीधे बैठता है।

इस दृष्टिकोण का सबसे छोटा तरीका मैं सोच सकता हूँ

DOMContentLoaded घटना के आधार पर समाधान केवल तभी काम करता है यदि स्क्रिप्ट दस्तावेज़ से पहले लोड हो जाती है, जबकि आलसी जांच से पता चलता है कि यह सुनिश्चित करता है कि कोड हमेशा निष्पादित होता है, यहां तक ​​कि बाद में गतिशील रूप से लोड किए गए स्क्रिप्टों में भी, जैसा कि JQuery के दस्तावेज़ के लिए तैयार है।

यह कोड सभी ब्राउज़रों (कुछ विरासत सहित, नीचे आईई 6 और विंडोज के लिए सफारी) के साथ संगत है।

 (function ready() { if (!document.body) {setTimeout(ready, 50); return;} // Document is ready here })(); 
 function onDocReady(fn){ (function c(){document.readyState!=="loading"?fn():setTimeout(c,9)})(); } function onDocLoad(fn){ (function c(){document.readyState==="complete"?fn():setTimeout(c,30)})(); } 

onDocReady एक कॉलबैक प्रदान करता है जब HTML dom पूरी तरह से / पार्स / हेरफेर करने के लिए तैयार है।

onDocLoad एक कॉलबैक प्रदान करता है जब सब कुछ लोड हो जाता है (छवियां आदि)

  • जब भी आप चाहें इन फ़ंक्शंस को बुलाया जा सकता है
  • कई "श्रोताओं" का समर्थन करता है
  • किसी भी ब्राउज़र में काम करेंगे।

यदि आपको बहुत पुराने ब्राउज़रों का समर्थन करने की आवश्यकता नहीं है, तो यहां यह करने का एक तरीका है, जब आपके बाहरी लिपि को async विशेषता से भरा हुआ है:

 HTMLDocument.prototype.ready = new Promise(function(resolve) { if(document.readyState != "loading") resolve(); else document.addEventListener("DOMContentLoaded", function() { resolve(); }); }); document.ready.then(function() { console.log("document.ready"); }); 

मैं बस का उपयोग करें:

 setTimeout(function(){ //reference/manipulate DOM here }); 

And unlike document.addEventListener("DOMContentLoaded" //etc as in the very top answer, it works as far back as IE9 — http://caniuse.com/#search=DOMContentLoaded only indicates as recently as IE11.

For instance, go to https://netrenderer.com/index.php , choose Internet Explorer 9 from the dropdown, enter https://dexygen.github.io/blog/oct-2017/jekyll/jekyll-categories/liquid-templates/2017/10/22/how-jekyll-builds-site-categories.html and click "Render", and you will see something akin to the screenshot at the bottom of this post.

See the following Javascript code I am using in the header to manipulate the style of the Jekyll "hacker" theme to my liking — in particular you can reference the if (location.pathname !== rootPath) block to see how I am inserting the Home and Blog Home links, which are being displayed by IE9 per the NetRenderer site.

Interestingly I stumbled upon this setTimeout solution in 2009: Is checking for the readiness of the DOM overkill? , which probably could have been worded slightly better, as I meant by using various frameworks' more complicated approaches.

 setTimeout(function() {//delay execution until after dom is parsed var containerEls = document.getElementsByClassName('container'); var headingEl = containerEls[0].getElementsByTagName('h1')[0]; var headerEl = document.getElementsByTagName('header')[0]; var downloadsSectionEl = document.getElementById('downloads'); var rootPath = "/"; var blogRootPath = "/blog/"; containerEls[0].style.maxWidth = '800px'; containerEls[1].style.maxWidth = '800px'; headingEl.style.margin = '0'; headerEl.style.marginBottom = '7px'; downloadsSectionEl.style.margin = '0'; if (location.pathname !== rootPath) { downloadsSectionEl.appendChild(generateNavLink('Home', rootPath)); if (location.pathname !== blogRootPath) { downloadsSectionEl.appendChild(document.createTextNode(' | ')); downloadsSectionEl.appendChild(generateNavLink('Blog Home', blogRootPath)); } } function generateNavLink(linkText, hrefPath) { var navLink = document.createElement('a'); var linkTextNode = document.createTextNode(linkText); navLink.setAttribute('href', hrefPath); navLink.appendChild(linkTextNode); return navLink; } }); 

dexygen.github.io on IE9

This was a good https://stackoverflow.com/a/11810957/185565 poor man's solution. One comment considered a counter to bail out in case of emergency. This is my modification.

 function doTheMagic(counter) { alert("It worked on " + counter); } // wait for document ready then call handler function var checkLoad = function(counter) { counter++; if (document.readyState != "complete" && counter<1000) { var fn = function() { checkLoad(counter); }; setTimeout(fn,10); } else doTheMagic(counter); }; checkLoad(0); 

Edit of the edit of @duskwuff to support Internet Explorer 8 too. The difference is a new call to the function test of the regex and the setTimeout with an anonymous function.

Also, I set the timeout to 99.

 function ready(f){/in/.test(document.readyState)?setTimeout(function(){ready(f);},99):f();} 

In short, instead of the $(document).ready() used in jQuery, we can use a JavaScript method:

 <script> document.addEventListener("DOMContentLoaded", function_name, false); function function_name(){ statements; } </script> 

Thus, when the page is ready ie DOMContentLoaded only then the function function_name() will be invoked.