javascript - jquery download




$(दस्तावेज़)। jQuery के बिना पहले से समकक्ष (20)

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

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


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

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

जहां तक ​​आपका प्रश्न चिंतित है, मैंने उपर्युक्त लिंक से नीचे दिया गया कोड लिया है :) केवल चेतावनी यह केवल Internet Explorer 9+ और बाद में काम करती है।

function ready(fn) {
    if (document.readyState != 'loading') {
        fn();
    }
    else {
        document.addEventListener('DOMContentLoaded', 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 )
}

इस सवाल को काफी समय पहले पूछा गया था। किसी को भी इस प्रश्न को देखने के लिए, अब "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();
        });
}

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

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. डोम तैयार होने के बाद ब्राउज़र body संलग्न स्क्रिप्ट टैग चलाता है।

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

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

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


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

var docLoaded = setInterval(function () {
    if(document.readyState !== "complete") return;
    clearInterval(docLoaded);

    /*
        Your code goes here i.e. init()
    */
}, 30);

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


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

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!");    
    };
})()

पहेली देखें


बस इसे अपने एचटीएमएल पेज के नीचे जोड़ें ...

<script>
    Your_Function();
</script>

क्योंकि, एचटीएमएल दस्तावेजों को ऊपर-नीचे से पार्स किया जाता है।


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

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

नोट: यह शायद नए ब्राउज़र के साथ ही काम करता है, खासकर इन: http://caniuse.com/#feat=domcontentloaded


मैं हाल ही में मोबाइल साइट के लिए इसका इस्तेमाल कर रहा था। यह "प्रो जावास्क्रिप्ट तकनीक" से जॉन रेजिग का सरलीकृत संस्करण है। यह 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;
})();

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

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

यह answer देखें।


यहां मैं जो उपयोग करता हूं, वह तेज़ है और मुझे लगता है कि सभी अड्डों को शामिल करता है; आईई <9 को छोड़कर सबकुछ के लिए काम करता है।

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

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

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

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

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


वास्तव में, यदि आप केवल Internet Explorer 9+ बारे में परवाह करते हैं, तो यह कोड jQuery.ready को बदलने के लिए पर्याप्त होगा:

    document.addEventListener("DOMContentLoaded", callback);

यदि आप Internet Explorer 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();
        }
    }
},

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

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

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

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

It starts by calling either document.addEventListener("DOMContentLoaded") or document.attachEvent('onreadystatechange') depending on the event model, and goes on from there.


बंद </body> टैग से ठीक पहले <script>/*JavaScript code*/</script>

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


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();}

If you are loading jQuery near the bottom of BODY, but are having trouble with code that writes out jQuery(<func>) or jQuery(document).ready(<func>), check out jqShim on Github.

Rather than recreate its own document ready function, it simply holds onto the functions until jQuery is available then proceeds with jQuery as expected. The point of moving jQuery to the bottom of body is to speed up page load, and you can still accomplish it by inlining the jqShim.min.js in the head of your template.

I ended up writing this code to make moving all the scripts in WordPress to the footer, and just this shim code now sits directly in the header.


If you don't have to support very old browsers, here is a way to do it even when your external script is loaded with async attribute:

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");
});

This approach is the shortest way I can think of.

The solution based on the DOMContentLoaded event only works if the script is loaded before the document, whereas the lazy check suggested here ensures the code is executed always, even in scripts loaded dynamically later on, exactly as the JQuery's document ready.

This code is compatible with all browsers (including some legacy, down to IE6 and Safari for Windows).

(function ready() {
    if (!document.body) {setTimeout(ready, 50); return;}
    // Document is ready here
})();

This was a good https://.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);




jquery