'Document (নথি) .ডিডি ()' এর নন-জিক্যুরি সমতুল্য কী?

Question

নন-জিকুয়ের সমতুল্য কী $(document).ready()?

Comments

আপনি যদি $(document).ready()কোনও লাইব্রেরি ব্যবহার না করে jQuery এর ইভেন্টটি পুনরুত্পাদন করতে চান তবে এটিকে একবার দেখুন: stackoverflow.com/questions/1795089/…

— সিএমএস

@ ওপ:: ভোনিলা জাভাস্ক্রিপ্ট প্রয়োগের জন্য প্রো জাভাস্ক্রিপ্ট কৌশলগুলির 899 পৃষ্ঠাটি দেখুন $(document).ready()- Books.google.com/… । এটি addEventডিন এডওয়ার্ডস দ্বারা রচিত ইভেন্টের বাঁধাই বিমূর্ততাও ব্যবহার করে , যার কোডটি

— রাশ ক্যাম

সম্ভাব্য সদৃশ $ (নথি)। jQuery ছাড়াই সমতুল্য

— কোয়ান্টাস 94 ভারী

Answer 1

সুন্দর জিনিস সম্পর্কে $(document).ready()এটি আগুন আগে window.onload। বাহ্যিক সম্পদ এবং চিত্র সহ সবকিছু লোড না হওয়া পর্যন্ত লোড ফাংশনটি অপেক্ষা করে। $(document).readyযাইহোক, DOM গাছ সম্পূর্ণ হয়ে গেলে এবং ম্যানিপুলেট করা যায় তখন আগুন লাগে। আপনি যদি jQuery ছাড়াই DOM প্রস্তুত করতে চান তবে আপনি এই লাইব্রেরিতে চেক করতে পারেন। কেউ readyjQuery থেকে মাত্র অংশটি বের করেছেন । এটি সুন্দর এবং ছোট এবং আপনি এটি দরকারী মনে করতে পারেন:

গুগল কোড এ ডোমড্রি

Comments

ডোমরডি কোড নেটওয়ার্ক! @ সিএমএসের মাধ্যমে গিথুব: github.com/cms/domready/network

— Kzqai

এটি প্রশ্নের উত্তর দেয় না এবং এটি কোনও নন-জিক্যুরি কোড প্রদর্শন করে না। এটি এত উপার্জন কিভাবে পেল?

— ড্যানিয়েল ডব্লিউ

@DanielW। কারণ এটি সহজ এবং ব্যবহারিক। আমাদের মধ্যে বেশিরভাগ জাভাস্ক্রিপ্ট কোড দ্বারা DOM ব্যবহারের জন্য প্রস্তুত কিনা তা নিশ্চিত করার জন্য এখানে একটি উপায় খুঁজছেন।

— আবারাজাল

হ্যাঁ তবে আমাদের মধ্যে কয়েকজন আসল উত্তরের জন্য এখানে এসেছিলেন।

— স্লববক্স

Answer 2

এটি ECMA থেকে পুরোপুরি কাজ করে

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

window.onloadJQuery থেকে সমান না $(document).readyকারণ $(document).readyশুধুমাত্র DOM গাছ থেকে অপেক্ষা করছে যখন window.onloadবাইরের সম্পদ এবং ইমেজ সহ সব উপাদান পরীক্ষা করুন।

সম্পাদনা : আইএন 8 এবং আরও পুরানো সমতুল্য, জ্যান ডার্কের পর্যবেক্ষণের জন্য ধন্যবাদ । আপনি এই লিঙ্কটিতে MDN এ এই কোডটির উত্স পড়তে পারেন :

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}

এ ছাড়াও অন্যান্য বিকল্প রয়েছে "interactive"। বিশদ জন্য MDN লিঙ্ক দেখুন ।

Comments

বেনিয়ামিনের সাথে একমত। আপনি কেবল সংযুক্তি ব্যবহার করতে পারবেন না। যেমন ক্রোমে আপনি পাবেন: আনকড টাইপ এরিয়ার: ডকুমেন্ট.এটাচএভেন্ট কোনও ফাংশন নয়। জান ডের্কের লিঙ্কযুক্ত উত্তরটি ব্যবহার করুন।

— ম্যানুয়েল আর্বড শ্মিড্ট

এই স্ক্রিপ্টটি ডাকা হলে ডকুমেন্টটি ইতিমধ্যে লোড হলে কী হবে? কিছুই হবে না :(

— অরিয়াদাম

@ ডিয়ারলপার নাপ, ক্রোম কনসোলে এটি চেষ্টা করে দেখুন - কিছুই হয়নি: document.addEventListener("DOMContentLoaded",function(){console.log(123)})এখনই চেষ্টা করুন

— অরিয়াদাম

সমর্থনে DOMContentLoaded ব্রাউজারে: caniuse.com/domcontentloaded

— Guillaume, Husta

@ এলিওট্রেগান এটি সত্য যে এই থ্রেডকে দূষিত করা এড়াতে আমি মন্তব্যটি সরিয়ে ফেললাম আমি আপনাকে সবাইকে একই পরামর্শ দেওয়ার পরামর্শ দিচ্ছি :) এবং প্রয়োজনে মন্তব্যটি নির্দেশ করে যদি প্রয়োজন হয় তবে একটি মন্তব্য করুন। যেহেতু এটি একটি অতিরিক্ত কারণ এটি ওসির প্রশ্নগুলি ছাড়িয়ে যায়

— স্লোপেড

Answer 3

একটা ছোট জিনিস আমি একসাথে রেখেছি

domready.js

(function(exports, d) {
  function domReady(fn, context) {

    function onReady(event) {
      d.removeEventListener("DOMContentLoaded", onReady);
      fn.call(context || exports, event);
    }

    function onReadyIe(event) {
      if (d.readyState === "complete") {
        d.detachEvent("onreadystatechange", onReadyIe);
        fn.call(context || exports, event);
      }
    }

    d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
    d.attachEvent      && d.attachEvent("onreadystatechange", onReadyIe);
  }

  exports.domReady = domReady;
})(window, document);

এটি কিভাবে ব্যবহার করতে

<script src="domready.js"></script>
<script>
  domReady(function(event) {
    alert("dom is ready!");
  });
</script>

আপনি যে প্রসঙ্গে কলম্বব্যাকটি দ্বিতীয় তর্কটি পাস করে চলে তাও আপনি পরিবর্তন করতে পারেন

function init(event) {
  alert("check the console");
  this.log(event);
}

domReady(init, console);

Comments

ধন্যবাদ. আমি এটি পিছনে সামঞ্জস্যপূর্ণ যে পছন্দ। এগিয়ে চলার অর্থ এই নয় যে কেবল ভাগ্যবান লোকদের পিছনে ফেলে রাখা উচিত। একটি আধুনিক ব্রাউজার ব্যবহার করতে না পারা (যে কারণেই হোক) দুর্ভাগ্যজনক ...

— সিও

Answer 4

এখন এটি 2018 এখানে একটি দ্রুত এবং সহজ পদ্ধতি।

এটি ইভেন্ট শ্রোতাদের যুক্ত করবে, তবে এটি ইতিমধ্যে বরখাস্ত করা থাকলে আমরা পরীক্ষা করব যে ডোমটি প্রস্তুত অবস্থায় আছে বা এটি সম্পূর্ণ। উপ-সংস্থানগুলি লোডিং শেষ করার আগে বা পরে এটি আগুন দিতে পারে (চিত্র, স্টাইলশিট, ফ্রেম ইত্যাদি)।

function domReady(fn) {
  // If we're early to the party
  document.addEventListener("DOMContentLoaded", fn);
  // If late; I mean on time.
  if (document.readyState === "interactive" || document.readyState === "complete" ) {
    fn();
  }
}

domReady(() => console.log("DOM is ready, come and get it!"));

অতিরিক্ত পড়া

• https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
  • লোডিং ইতিমধ্যে সম্পূর্ণ হয়েছে কিনা তা পরীক্ষা করা হচ্ছে
• https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

---

হালনাগাদ

স্ট্যান্ডার্ড ES6 আমদানি ও রফতানি ব্যবহার করে এখানে কিছু দ্রুত ইউটিলিটি সহায়ক রয়েছে যা আমি লিখেছিলাম যাতে টাইপস্ক্রিপ্টও অন্তর্ভুক্ত থাকে। সম্ভবত আমি এগুলি একটি দ্রুত লাইব্রেরি তৈরি করতে পারি যা নির্ভরতা হিসাবে প্রকল্পগুলিতে ইনস্টল করা যেতে পারে।

জাভাস্ক্রিপ্ট

export const domReady = (callBack) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

টাইপরাইটারে মুদ্রি

export const domReady = (callBack: () => void) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack: () => void) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

অঙ্গীকার

export const domReady = new Promise(resolve => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', resolve);
  }
  else {
    resolve();
  }
});

export const windowReady = new Promise(resolve => {
  if (document.readyState === 'complete') {
    resolve();
  }
  else {
    window.addEventListener('load', resolve);
  }
});

Answer 5

Http://youmightnotneedjquery.com/ এর মতে একটি দুর্দান্ত প্রতিস্থাপন যা এখনও আই 8 এর সাথে কাজ করে

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

// test
window.ready(function() {
    alert('it works');
});

উন্নতি : ব্যক্তিগতভাবে আমি এটিও পরীক্ষা করে দেখব যে এর ধরণটি fnকোনও ফাংশন কিনা। এবং যেমন এলিওট্রেগান পরামর্শ দিয়েছেন ব্যবহারের পরে ইভেন্ট শ্রোতাদের সরানোর জন্য।

আমি এই প্রশ্নের দেরি করার কারণটি হ'ল কারণ আমি এই উত্তরটি অনুসন্ধান করেছিলাম কিন্তু এখানে এটি খুঁজে পাইনি। এবং আমি মনে করি এটিই সেরা সমাধান।

Comments

হ্যাঁ, এটি আমার মতে সেরা উত্তর। পড়তে সহজ, এবং এটি কোডটি কার্যকর করে এমনকি ডিওএম ইতিমধ্যে লোড করা থাকলেও। কেবলমাত্র আমি যুক্ত করব ইভেন্টটি সরিয়ে দেওয়ার পরে ইভেন্টলিস্টারকে সরিয়ে ফেলা।

— এলিওট্রেগান

Answer 6

একটি স্ট্যান্ডার্ড ভিত্তিক প্রতিস্থাপন রয়েছে, DOMContentLoADed যা 90% এর বেশি ব্রাউজার দ্বারা সমর্থিত হয়, তবে IE8 নয় (ব্রাউজার সমর্থনের জন্য JQuery দ্বারা কোড ব্যবহারের নীচে) :

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

Comments

নতুন jQuery পুরানো ব্রাউজারগুলির জন্য সমর্থন বাদ দিয়েছে এবং এখন তাদের কেবল ব্যবহার DOMContentLoadedএবং loadইভেন্টগুলি রয়েছে addEventListenerএবং প্রথমটি যে আগুন উভয় শ্রোতাকে সরিয়ে দেয়, তাই এটি দুটি বার আগুন না দেয়।

— jcubic

Answer 7

কোন লাইব্রেরি সহ প্লেন ভ্যানিলা জাভাস্ক্রিপ্টে? এটি একটি ত্রুটি। $কেবল একটি সনাক্তকারী, এবং আপনি এটি সংজ্ঞায়িত না করে অপরিজ্ঞাত।

jQuery $এর নিজস্ব "সবকিছু অবজেক্ট" হিসাবে সংজ্ঞা দেয় ( jQueryএটি অন্যান্য গ্রন্থাগারের সাথে বিরোধ না করে আপনি এটি ব্যবহার করতে পারেন বলেও পরিচিত )। আপনি যদি jQuery ব্যবহার করেন না (বা এটির সংজ্ঞা দেয় এমন কোনও গ্রন্থাগার), তবে $সংজ্ঞায়িত হবে না।

অথবা আপনি জিজ্ঞাসা করছেন সমতল জাভাস্ক্রিপ্টে সমতুল্য কি? window.onloadসেক্ষেত্রে আপনি সম্ভবত এটি চাইবেন যা হুবহু সমতুল্য নয়, তবে ভ্যানিলা জাভাস্ক্রিপ্টে একই প্রভাবটির নিকটবর্তী হওয়ার দ্রুত এবং সহজতম উপায়।

Comments

এই উত্তরের (এবং নীচে অন্যদের) অনেক নিম্নগামীদের জন্য: যখন এই প্রশ্ন জিজ্ঞাসা করা হয়েছিল, তখন এটি কেবলই বলেছিল: "জাভাস্ক্রিপ্টে $ (নথি) কি আছে? প্রস্তুত ()? জকিউরি নয় এটি কী?" মনে হচ্ছিল যে তিনি জিজ্ঞাসা করছেন যা jQuery লোড না করে প্লেইন ভ্যানিলা জাভাস্ক্রিপ্ট বলতে বোঝায়। আমার উত্তরে, আমি সেই প্রশ্নের উত্তর দেওয়ার চেষ্টা করেছি, পাশাপাশি প্লে-ভ্যানিলা জাভাস্ক্রিপ্টের জন্য জিকিউরি বা অন্যান্য লাইব্রেরি নেই যার অর্থ সে বোঝাতে চেয়েছিল। নোট করুন যে সমস্ত অতিরিক্ত প্রসঙ্গটি অন্যান্য লোকেরা অনুমান করে যে প্রশ্নটি জিজ্ঞাসা করছে আসল পোস্টারটি নয় added

— ব্রায়ান ক্যাম্পবেল

Answer 8

সাম্প্রতিক ব্রাউজারে সহজ পদ্ধিতি হল উপায় উপযুক্ত ব্যবহার করতে হবে GlobalEventHandlers , onDOMContentLoaded , লোড থাকলে , onloadeddata (...)

onDOMContentLoaded = (function(){ console.log("DOM ready!") })()

onload = (function(){ console.log("Page fully loaded!") })()

onloadeddata = (function(){ console.log("Data loaded!") })()

প্রারম্ভিক এইচটিএমএল ডকুমেন্টটি লোড শেষ করার জন্য স্টাইলশিট, চিত্র এবং সাবফ্রেমগুলির জন্য অপেক্ষা না করে সম্পূর্ণ HTML লোড এবং পার্স করা হয়ে গেলে DOMContentLoaded ইভেন্টটি বরখাস্ত করা হয়। খুব সম্পূর্ণ ইভেন্ট লোড কেবল একটি সম্পূর্ণ-লোড হওয়া পৃষ্ঠা সনাক্ত করতে ব্যবহার করা উচিত। লোড ব্যবহার করা এটি একটি অবিশ্বাস্যরকম জনপ্রিয় ভুল যেখানে ডমকন্টেন্টলয়েড আরও বেশি উপযুক্ত হবে, তাই সাবধান হন।

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

ব্যবহৃত ফাংশন একটি আইআইএফই, এই ক্ষেত্রে খুব দরকারী কারণ এটি প্রস্তুত হওয়ার সময় এটি নিজেই ট্রিগার করে:

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

যে কোনও স্ক্রিপ্টের শেষে এটি স্থাপন করা স্পষ্টতই আরও উপযুক্ত।

ES6 এ, আমরা এটি একটি তীর ফাংশন হিসাবেও লিখতে পারি:

onload = (() => { console.log("ES6 page fully loaded!") })()

DOM উপাদান ব্যবহার করা সবচেয়ে ভাল, আমরা কোনও পরিবর্তনশীল প্রস্তুত হওয়ার জন্য অপেক্ষা করতে পারি, এটি একটি তীরযুক্ত আইআইএফই ট্রিগার করে।

আচরণ একই হবে, তবে কম স্মৃতি প্রভাবের সাথে।

footer = (() => { console.log("Footer loaded!") })()

<div id="footer">

অনেক ক্ষেত্রে দস্তাবেজ অবজেক্টটি কমপক্ষে আমার ব্রাউজারে প্রস্তুত হওয়ার পরেও ট্রিগার করে। বাক্য গঠনটি তখন খুব দুর্দান্ত, তবে এটি সামঞ্জস্যতা সম্পর্কে আরও পরীক্ষা প্রয়োজন।

document=(()=>{    /*Ready*/   })()

Comments

DOM এর পরে উপাদানগুলির লোডিং শেষ হওয়ার আগে কোনও আইআইএফই ট্রিগার করতে পারে?

— সিটিএস_এই

অবশ্যই, এটি বন্ধের মধ্যে কেবল একটি ফাংশন, একটি অনামী কাজ।

— এনভিআরএম

Answer 9

অন ​​লড বডিটিও বিকল্প হতে পারে:

<html>
<head><title>Body onLoad Exmaple</title>

<script type="text/javascript">
    function window_onload() {
        //do something
    }
</script>

</head>
<body onLoad="window_onload()">

</body>
</html>