জাভাস্ক্রিপ্ট - কীভাবে ডকুমেন্টটি লোড হয়েছে কিনা তা সনাক্ত করতে (IE 7 / ফায়ারফক্স 3)

Question

আমি কোনও দস্তাবেজ লোড হওয়ার পরে একটি ফাংশনটিতে কল করতে চাই, তবে ডকুমেন্টটি এখনও লোড শেষ করতে পারে বা নাও করতে পারে। এটি লোড না হলে, আমি কেবল ফাংশন কল করতে পারেন। যদি এটি লোড না হয় তবে আমি কোনও ইভেন্ট শ্রোতাকে সংযুক্ত করতে পারি। অনলোড লোড হওয়ার পরে আমি কোনও ইভেন্টলিস্টার যুক্ত করতে পারছি না কারণ এটি কল হবে না। সুতরাং ডকুমেন্টটি লোড হয়েছে কিনা তা আমি কীভাবে পরীক্ষা করতে পারি? আমি নীচের কোডটি চেষ্টা করেছি তবে এটি পুরোপুরি কার্যকর হয় না। কোন ধারনা?

var body = document.getElementsByTagName('BODY')[0];
// CONDITION DOES NOT WORK
if (body && body.readyState == 'loaded') {
    DoStuffFunction();
} else {
    // CODE BELOW WORKS
    if (window.addEventListener) {  
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload', DoStuffFunction);
    }
}

Comments

"আমি কোনও দস্তাবেজ লোড হওয়ার পরে একটি ফাংশনটিতে কল করতে চাই, তবে ডকুমেন্টটি এখনও লোড শেষ করতে পারে বা নাও করতে পারে।" এটি গণনা করে না।

— রিচার্ড সিমিস

আমি বিশ্বাস করি যে প্রাথমিকভাবে তার ব্লক কোডটি চালু হওয়ার সময় তার নিয়ন্ত্রণ নেই, তবে নথিটি লোডিং শেষ হওয়ার আগে ডোস্টফফানশন () ডাকা হবে না তা নিশ্চিত করতে চান।

— বেন ফাঁকা

Answer 1

গালাম্বালাজ দ্বারা উল্লিখিত সমস্ত কোডের প্রয়োজন নেই। খাঁটি জাভাস্ক্রিপ্টে এটি করার জন্য ক্রস ব্রাউজারের উপায়টি কেবল পরীক্ষা করা সহজ document.readyState:

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

এটি jQuery এটি কীভাবে করে।

জাভাস্ক্রিপ্ট কোথায় লোড করা হয়েছে তার উপর নির্ভর করে এটি একটি বিরতিতে করা যেতে পারে:

var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        init();
    }
}, 10);

আসলে, document.readyStateতিনটি রাষ্ট্র থাকতে পারে:

দস্তাবেজটি লোড হওয়ার সময় "লোডিং", পার্সিং শেষ হয়ে গেলে "ইন্টারেক্টিভ" ফেরত দেয় তবে সাব-রিসোর্সগুলি লোড করার পরে এবং "লোড" হয়ে গেলে এটি সম্পূর্ণ হয়। - মোজিলা বিকাশকারী নেটওয়ার্কে ডকুমেন্ট.ডিয়ারস্টেট

সুতরাং আপনার যদি প্রস্তুত হওয়ার জন্য কেবল ডোম প্রয়োজন হয় তবে এটি পরীক্ষা করে দেখুন document.readyState === "interactive"। চিত্রগুলি সহ পুরো পৃষ্ঠাটি প্রস্তুত হওয়ার জন্য যদি আপনার প্রয়োজন হয় তবে তা পরীক্ষা করে দেখুন document.readyState === "complete"।

Comments

@ কোস্টা, যদি এর document.readyState == "complete"অর্থ চিত্রগুলি সহ সমস্ত কিছু বোঝাই হয়ে গেছে।

— লরেন্ট

আমি উভয় ইভেন্টের সংমিশ্রণটি ব্যবহার করছি এবং document.readyStateএটি নিশ্চিত করার জন্য যে ডম পার্স হওয়ার পরে বা পরে ডাকা হয়েছে তার উপর নির্ভর করে ফাংশনটি শুরু হয়। ইন্টারেক্টিভ জন্য কোন ইভেন্ট আছে readyState?

— টম্যা জ্যাটো - মনিকা

আমি ব্যবহার করতাম /loaded|complete/.test(document.readyState)। কিছু ব্রাউজার document.readyState"সম্পূর্ণ" এর পরিবর্তে "লোড করা "তে সেট করে। এছাড়াও, ডকুমেন্ট.ডিয়ারস্টেট ফন্টগুলি লোড হয়েছে কিনা তা নিশ্চিত করে না, প্লাগইন ব্যতীত এর জন্য পরীক্ষা করার সত্যিকারের ভাল উপায় নেই।

— রায়ান টেলর

কি হবে document.onreadystatechange? এটি ব্রাউজারগুলি সমর্থন করলে এটি আরও প্রবাহিত বলে মনে হয়। stackoverflow.com/questions/807878/...

আমি মনে করি document.readyState !== "loading""ডিওএম প্রস্তুত" অবস্থার জন্য যাচাই করা আরও ভাল । এটি readyStateকোনও কারণে ("ইন্টারেক্টিভ" অবস্থার পরে) দেরিতে চেক করা হলে সমস্যাগুলি ক্রপিংয়ে আটকায় ।

— রিনিভিয়াস

Answer 2

লাইব্রেরির দরকার নেই। jQuery এই স্ক্রিপ্টটি কিছুক্ষণ ব্যবহার করেছে, বিটিডাব্লু।

http://dean.edwards.name/weblog/2006/06/again/

// Dean Edwards/Matthias Miller/John Resig

function init() {
  // quit if this function has already been called
  if (arguments.callee.done) return;

  // flag this function so we don't do the same thing twice
  arguments.callee.done = true;

  // kill the timer
  if (_timer) clearInterval(_timer);

  // do stuff
};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
  document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
  var script = document.getElementById("__ie_onload");
  script.onreadystatechange = function() {
    if (this.readyState == "complete") {
      init(); // call the onload handler
    }
  };
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      init(); // call the onload handler
    }
  }, 10);
}

/* for other browsers */
window.onload = init;

Comments

ঠিক আমি কী সন্ধান করছিলাম - jQuery লাইব্রেরি ছাড়াই jQuery. چمتو ফাংশন। ধন্যবাদ!

— stricjux

পুরোপুরি প্রশ্নের পয়েন্ট মিস করলাম। initআপনার পোস্ট করা কোডটি পৃষ্ঠাটি ইতিমধ্যে লোড হওয়ার পরে অন্তর্ভুক্ত করা থাকলে চলবে না, যা ওপির মূল বিষয়: তিনি যখন স্ক্রিপ্টটি অন্তর্ভুক্ত করবেন তখন সে নিয়ন্ত্রণ করতে পারে না। (মনে রাখবেন যে কেবল setInterval

— শাখাটিই

এটি একটি লাইব্রেরিতে অন্তর্ভুক্ত। অন্যান্য সমস্ত চাকার পাশাপাশি লোকেরা সাধারণত পুনরায় উদ্ভাবন করে।

— বি01

Answer 3

আপনি সম্ভবত jQuery এর মতো কিছু ব্যবহার করতে চান যা জেএস প্রোগ্রামিংটিকে আরও সহজ করে তোলে।

কিছুটা এইরকম:

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

আপনি কি পরে মনে হয়।

Comments

এবং যদি তিনি দেখতে চান যে jQuery কীভাবে এটি বহনযোগ্য উপায়ে করে, jQuery এর উত্সটি এই পরিদর্শনটির জন্য রয়েছে :-)

— টমাস এল হোলাডে

এবং যদি এটি স্পষ্ট না হয় তবে ডকুমেন্ট লোডের পরে যদি ready()ডাকা হয় তবে উত্তীর্ণ ফাংশনটি তত্ক্ষণাত্ সঞ্চালিত হয়।

— বেন ফাঁকা

— @ বেন

@ রোয়াতিন মার্থ - আসলে, এটিও বেশ কার্যকর। (এফএফ 8 এবং আইই 8 তে কেবল jQuery 1.7.1 দিয়ে এটি ব্যবহার করে দেখেছেন))

— বেন ফাঁকা

-১: এমনকি যদি উত্তরটি বোঝায় তবে ওপি কখনই jQuery উল্লেখ করেনি। ডকুমেন্ট প্রস্তুত করার জন্য পুরো jQuery প্রকল্পটি ব্যবহার করা হ'ল উপায় ওভারকিল।

— marcgg

Answer 4

if(document.readyState === 'complete') {
    DoStuffFunction();
} else {
    if (window.addEventListener) {  
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload', DoStuffFunction);
    }
}

Comments

দেখে নেই যে সর্বশেষতম ক্রোমে document.loadedসর্বদা অপরিজ্ঞাত

— অনিকেত

এটি ছিল 2010 :)। এখন আমি ব্যবহার করবbody.readyState === 'loaded'

— Jman

Answer 5

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

দস্তাবেজ জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করুন (অর্থাত্ লোড চালানোর আগে সর্বদা ডাকা হয়):

var pageisloaded=0;
window.addEvent('load',function(){
 pageisloaded=1;
});

তারপরে আপনার কোড:

if (pageisloaded) {
 DoStuffFunction();
} else {
 window.addEvent('load',DoStuffFunction);
}

(বা আপনার পছন্দসই কাঠামোর সমতুল্য)) ভবিষ্যতের পৃষ্ঠাগুলির জন্য জাভাস্ক্রিপ্ট এবং চিত্রগুলির পূর্বনির্ধারণ করতে আমি এই কোডটি ব্যবহার করি। যে জিনিসগুলি আমি পাচ্ছি তা এই পৃষ্ঠার জন্য মোটেই ব্যবহৃত হয়নি, তাই আমি চাই না যে এটি চিত্রগুলির দ্রুত ডাউনলোডের চেয়ে অগ্রাধিকার গ্রহণ করবে।

এর চেয়ে ভাল আর কোনও উপায় থাকতে পারে তবে আমি এখনও এটি খুঁজে পাইনি।

Answer 6

মজিলা ফায়ারফক্স বলেছেন যে এটির onreadystatechangeএকটি বিকল্প DOMContentLoaded।

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        initApplication();
    }
}

ইন DOMContentLoadedMozila এর ডক বলেছেন:

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

আমি মনে করি loadইভেন্টটি একটি সম্পূর্ণ দস্তাবেজ + রিসোর্স লোডিংয়ের জন্য ব্যবহার করা উচিত।

Answer 7

জিকুয়েরির সাথে উপরেরটিটি সবচেয়ে সহজ এবং বেশিরভাগ ব্যবহৃত উপায় used তবে আপনি খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন তবে এই স্ক্রিপ্টটি মাথায় সংজ্ঞায়িত করার চেষ্টা করুন যাতে এটি শুরুতেই পড়ে। আপনি যা খুঁজছেন তা হল window.onloadইভেন্ট event

নীচে একটি সাধারণ স্ক্রিপ্ট যা আমি একটি কাউন্টার চালানোর জন্য তৈরি করেছি। এরপরে কাউন্টারটি 10 ​​টি পুনরাবৃত্তির পরে বন্ধ হয়

window.onload=function()
{
    var counter = 0;
    var interval1 = setInterval(function()
    { 
        document.getElementById("div1").textContent=counter;
        counter++; 
        if(counter==10)
        {
            clearInterval(interval1);
        }
    },1000);

}

Answer 8

এটা চেষ্টা কর:

var body = document.getElementsByTagName('BODY')[0];
// CONDITION DOES NOT WORK
if ((body && body.readyState == 'loaded') || (body &&  body.readyState == 'complete') ) {
    DoStuffFunction();
} else {
    // CODE BELOW WORKS
    if (window.addEventListener) {
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload',DoStuffFunction);
    }
}

Answer 9

আমার অন্যান্য সমাধান আছে, মাই অ্যাপের নতুন অবজেক্টটি তৈরি হওয়ার পরে আমার অ্যাপ্লিকেশনটি শুরু করা দরকার, তাই দেখে মনে হচ্ছে:

function MyApp(objId){
     this.init=function(){
        //.........
     }
     this.run=function(){
          if(!document || !document.body || !window[objId]){
              window.setTimeout(objId+".run();",100);
              return;
          }
          this.init();
     };
     this.run();
}
//and i am starting it 
var app=new MyApp('app');

এটি সমস্ত ব্রাউজারে কাজ করছে, যা আমি জানি।