709

কোনটি আরও ব্যাপকভাবে সমর্থিত: window.onloadবা document.onload?

javascript event-handling dom-events

2

এমডিএন ডক্স এই windowঘটনাগুলি ব্যাখ্যা করে : onloadএবং DOMContentLoaded। ব্যবহারের উদাহরণ :, window.addEventListener('DOMContentLoaded', callback)। 2019 এর মাঝামাঝি পর্যন্ত সমস্ত বড় ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ। ----- বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এপিআই / উইন্ডো/… ------ বিকাশকারী.মোজিলা.অর্গ

— ক্রেগ হিক্স

আমার জন্য এমনকি এখনও, ফায়ারফক্স মধ্যে 75,0 আজ, window.onloadএবং document.onloadহয় বিভিন্ন একে অপরের থেকে! window.onloadপরে সংঘটিত হয়েছে বলে মনে হয় এবং এর চেয়ে কিছুটা বেশি লোড হয়েছে document.onload! (কিছু জিনিস উইন্ডো নিয়ে কাজ করছে যা নথির সাথে কাজ করছে না! এটি ডকুমেন্টের জন্য যায় readআপনিস্ট্যাটচেঞ্জও 'সম্পূর্ণ'!)

— অ্যান্ড্রু

722

তারা কখন গুলি চালায়?

window.onload

ডিফল্টরূপে, এটি বহিস্কার যখন সম্পূর্ণ পৃষ্ঠাটি লোড সহ এটির সামগ্রী (ছবি, সিএসএস, স্ক্রিপ্ট, ইত্যাদি)।

কিছু ব্রাউজারে এটি এখন ডিওএম প্রস্তুত হওয়ার সাথে সাথে তার ভূমিকা গ্রহণ করে এবং গুলি চালায় document.onload।

document.onload

যখন ডওএম প্রস্তুত থাকে তখন ডাকা হয় যা চিত্রগুলির আগে হতে পারে এবং অন্যান্য বাহ্যিক সামগ্রী লোড হয়।

তারা কতটা সমর্থিত?

window.onloadসবচেয়ে বেশি সমর্থিত বলে মনে হচ্ছে। প্রকৃতপক্ষে, সর্বাধিক আধুনিক ব্রাউজারগুলির এক অর্থে প্রতিস্থাপন document.onloadরয়েছে window.onload।

ব্রাউজার সমর্থন সংক্রান্ত সমস্যাগুলি সম্ভবত ডকুমেন্ট প্রস্তুত হওয়ার জন্য, যাচাইয়ের ব্যবস্থা করার জন্য jQuery এর মতো লাইব্রেরি ব্যবহার শুরু করার কারণ সম্ভবত:

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

ইতিহাসের উদ্দেশ্যে। window.onloadবনাম body.onload:

ওভার ব্যবহার সম্পর্কে কিছুক্ষণ আগে কোডিংফোরামগুলিতে অনুরূপ প্রশ্ন জিজ্ঞাসা করা হয়েছিল । ফলাফলটি মনে হয়েছিল যে আপনার ব্যবহার করা উচিত কারণ আপনার কাঠামোটিকে ক্রিয়া থেকে পৃথক করা ভাল।window.onloadbody.onloadwindow.onload

— জোশ মেইন
সূত্র

25

প্রকৃতপক্ষে সেই বিবৃতিটি একটি পৃথক window.onloadএবং <body onload="">যা সম্পূর্ণ আলাদা (এবং "কর্ম থেকে পৃথক কাঠামো" এই প্রসঙ্গে অনেক বেশি অর্থবোধ করে) এর মধ্যে একটি পছন্দকে নির্দেশিত বলে মনে হচ্ছে । উত্তরটি ভুল বলে নয়, তবে এর ভিত্তি।

— Thor84no

2

সেই উদ্ধৃতিটি ব্যাকরণগতভাবে ভয়ঙ্কর ... কিছু (চিহ্নিত) সম্পাদনা সহায়তা করা উচিত নয়?

— খেলাদার 16'13

@ Thor84no আমি অবশেষে এটিকে আবার দেখার জন্য সময় পেয়েছি। আমি কিছু উন্নতি করেছি।

— জোশ মেইন

@ খেলাদার আমি উক্তিটি রাফ করার সিদ্ধান্ত নিয়েছিলাম কারণ এটি মোটামুটি রুক্ষ ছিল।

— জোশ মেইন

@ জোশমেইন এর অর্থ কি জিকুয়ের document.onloadসমতুল্য জেএস-সমান document.ready?

— জন সিজে

276

সাধারণ ধারণাটি হ'ল উইন্ডোটি যখন ডকুমেন্টের উইন্ডো উপস্থাপনের জন্য প্রস্তুত হয় এবং ডকুমেন্টের উইন্ডোটি চালিত হয় the DOM ট্রি (নথির মধ্যে মার্কআপ কোড থেকে তৈরি) সম্পন্ন হলে অগ্নিকান্ডগুলি ।

আদর্শভাবে, ডিওএম -ট্রি ইভেন্টগুলিতে সাবস্ক্রাইব করে জাভাস্ক্রিপ্টের মাধ্যমে অফস্ক্রিন-ম্যানিপুলেশনগুলি মঞ্জুরি দেয়, এতে প্রায় কোনও সিপিইউ লোড হয় না । বিপরীতভাবে, window.onloadকরতে আগুন হতে কিছু সময় নিতে , একাধিক বৈদেশিক সম্পদ এখনো আছে, অনুরোধ করা হবে পার্স এবং লোড করা হয়নি।

টেস্ট দৃশ্য:

পার্থক্যটি এবং আপনার পছন্দসই ব্রাউজারটি পূর্বোক্ত ইভেন্ট হ্যান্ডলারগুলি কীভাবে কার্যকর করে তা পর্যালোচনা করতে , কেবল আপনার নথির - - ট্যাগের মধ্যে নিম্নলিখিত কোডটি সন্নিবেশ করান ।<body>

<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){ 
    console.log("document.onload", e, Date.now() ,window.tdiff,  
    (window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) ); 
}
window.onload = function(e){ 
    console.log("window.onload", e, Date.now() ,window.tdiff, 
    (window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) ); 
}
</script>

►Result:

ক্রোম ভি 20 (এবং সম্ভবত বেশিরভাগ বর্তমান ব্রাউজারগুলি) এর জন্য পর্যবেক্ষণযোগ্য ফলাফলের আচরণটি এখানে।

কোনও document.onloadঅনুষ্ঠান নেই ।
onloadএর ভিতরে ঘোষিত হওয়ার পরে দু'বার আগুন জ্বলে <body>ওঠে <head>( যখন ইভেন্টটি তখন কাজ করে document.onload)।
কাউন্টারের রাজ্যের উপর নির্ভরশীল গণনা এবং অভিনয় উভয় ইভেন্টের আচরণ অনুকরণ করতে দেয় allows
বিকল্পভাবে window.onloadইভেন্ট হ্যান্ডলারটি এইচটিএমএল- <head>এলিমেন্টের সীমার মধ্যে ঘোষণা করুন ।

X উদাহরণ প্রকল্প:

উপরের কোডটি এই প্রকল্পের কোডবেস ( index.htmlএবং keyboarder.js) থেকে নেওয়া হয়েছে ।

উইন্ডো অবজেক্টের ইভেন্ট হ্যান্ডলারের তালিকার জন্য , দয়া করে MDN ডকুমেন্টেশন দেখুন।

— লরেঞ্জ লো সৌর
সূত্র

141

ইভেন্ট শ্রোতা যুক্ত করুন

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
      // - including fonts, images, etc.
  });
</script>

`Update March 2017`

1 ভ্যানিলা জাভাস্ক্রিপ্ট

window.addEventListener('load', function() {
    console.log('All assets are loaded')
})

2 jQuery

$(window).on('load', function() {
    console.log('All assets are loaded')
})

শুভকামনা

— আকাশ
সূত্র

14

"প্রারম্ভিক এইচটিএমএল ডকুমেন্টটি লোডিং শেষ করার জন্য স্টাইলশিট, চিত্র এবং সাবফ্রেমগুলির জন্য অপেক্ষা না করে পুরো প্রাথমিকভাবে লোড এবং পার্স করা হয়ে গেলে DOMContentLoaded ইভেন্টটি বরখাস্ত করা হয়" " - বিকাশকারী.মোজিলা.আর.ইন / ডকস / ওয়েবে / এজেন্টস / ডমকন্টেন্টলয়েড তাই আপনাকে এই ইভেন্টে লোড করা সমস্ত কিছু ভুল বলে মনে হচ্ছে।

— অধ্যাপক 8

2

প্রফোক, আপনার মতামতের জন্য আপনাকে ধন্যবাদ আপনি চেষ্টা করতে পারেন window.addEventListener('load', function() {...})। আমি আমার উত্তর আপডেট করেছি।

— আকাশ

4

এই উত্তর সম্পর্কে আমি যা পছন্দ করি তা হ'ল এটি একটি সাধারণ-পুরানো-জাভাস্ক্রিপ্ট সমাধান দেয়। আপনি মনে করেন যে বেশিরভাগ লোকেরা মনে করেন যে jQuery সমস্ত ব্রাউজারগুলিতে তৈরি করা হয়েছে, কেবলমাত্র এটি শুধুমাত্র উত্তর হিসাবে দেওয়া হয়।

— ডেভ ল্যান্ড

ডাবল সমস্যা যখন জঘন্য jquery লোড হতে খুব বেশি সময় নেয় এবং আপনি পাওয়া যায়। আমি মতামতের যে $ (উইন্ডো)। প্রস্তুত ধরণের সমাধান কাজ করতে বিশ্বাস করা উচিত নয়।

— শায়নে

1

আমি আজকের ক্রোমে উভয়ই চেষ্টা করেছি। এটি CSS এবং ফন্টের জন্য অপেক্ষা করছে না।

— মুভএক্স

78

পার্সিং এইচটিএমএল নথি অনুসারে - শেষ ,

ব্রাউজারটি এইচটিএমএল উত্সকে পার্স করে এবং মুলতুবি স্ক্রিপ্টগুলি চালায়।
একটি যখন DOMContentLoadedপ্রেরণ করা হয় documentযখন সমস্ত এইচটিএমএল বিশ্লেষণ করে চলেছে। ইভেন্ট বুদবুদ window।
ব্রাউজার সংস্থানগুলি লোড করে (চিত্রগুলির মতো) যা লোড ইভেন্টটি বিলম্ব করে।
একটি loadইভেন্ট প্রেরণ করা হয় window।

সুতরাং, ফাঁসি কার্যকর করার আদেশ হবে

DOMContentLoadedwindowক্যাপচার পর্বে ইভেন্ট শ্রোতা
DOMContentLoaded ইভেন্ট শ্রোতা document
DOMContentLoadedwindowবুদ্বুদ পর্বে ইভেন্ট শ্রোতা
loadইভেন্ট শ্রোতা ( onloadইভেন্ট হ্যান্ডলার সহ ) এরwindow

কোনও বুদ্বুদ loadইভেন্ট শ্রোতা ( onloadইভেন্ট হ্যান্ডলার সহ ) documentকখনই প্রার্থনা করা উচিত নয়। কেবল ক্যাপচার loadশ্রোতাদেরই আহ্বান করা যেতে পারে তবে স্টাইলশিটের মতো সাব-রিসোর্সের লোডের কারণে, নথির নিজেই বোঝার কারণে নয়।

window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - bubble'); // 3rd
});

window.addEventListener('load', function() {
  console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
  /* Filter out load events not related to the document */
  if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
    console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
  console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
  console.log('window - load - bubble'); // 4th
});

window.onload = function() {
  console.log('window - onload'); // 4th
};
document.onload = function() {
  console.log('document - onload'); // DOES NOT HAPPEN
};

স্নিপেট প্রসারিত করুন

— Oriol
সূত্র

আমি আপনার স্নিপেট চালিয়েছি এবং document - load - captureপ্রকৃতপক্ষে ঘটেছে, যা আমার অনুসন্ধানে আমি প্রত্যাশা করেছিলাম তার সাথে কেন ডকুমেন্টের লোড আমার জন্য ঘটছে না counter উদ্ভটভাবে, এটি বেমানান। কখনও কখনও এটি প্রদর্শিত হয়, কখনও কখনও এটি হয় না, কখনও কখনও এটি দু'বার প্রদর্শিত হয় - তবে কখনও কখনও document - load - bubbleঘটে না। আমি ব্যবহার না করার পরামর্শ দেব document load।

— ত্রুটিপূর্ণ

টুইটার loadবাহ্যিক সংস্থানগুলিতে কোনও ইভেন্ট প্রেরণ করা হয়েছে তা আমি বিবেচনা করি নি । এই ইভেন্টটি বুদবুদ হয় না তাই এটি নথিতে সাধারণত সনাক্ত না হয় তবে এটি ক্যাপচারের পর্যায়ে হওয়া উচিত। এই এন্ট্রিগুলি <style>এবং <script>উপাদানগুলির বোঝা বোঝায় । আমি মনে করি এজগুলি তাদের দেখানোর জন্য সঠিক এবং ফায়ারফক্স এবং ক্রোম ভুল।

— অরিওল

ধন্যবাদ ওরিওল, useCaptureবিকল্পটি আমাকে নতুন কিছু শিখিয়েছে।

— পল ওয়াটসন

ডাব্লু 3 থেকে পার্সিং এবং রেন্ডারিং প্রবাহের সংক্ষিপ্তসার জন্য ধন্যবাদ। আমি কেবলমাত্র 'লোড' ইভেন্টটি ধাপে ধাপে 4 পরে যাওয়ার পরে অবাক হয়েছি, আর কী ঘটতে পারে? আমি আমার ব্রাউজারে লক্ষ্য করেছি যে মাঝেমধ্যে লোড ইভেন্টটি সরিয়ে দেওয়ার পরেও কিছু কিছু জিনিস আনা হচ্ছে যদিও আমি পৃষ্ঠার সাথে স্পর্শ করি নি বা যোগাযোগ করি নি। আপনি কি জানেন যে এই জিনিসগুলি কী বলা হয়? 'নন-ব্লকিং রেন্ডারিং অবজেক্টস?

— weefwefwqg3

12

ক্রোমে উইন্ডো.অনলোডগুলি <body onload="">ফায়ারফক্স (সংস্করণ 35.0) এবং আইই (সংস্করণ 11) উভয়ই একই।

আপনি নিম্নলিখিত স্নিপেট দ্বারা এটি অন্বেষণ করতে পারে:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--import css here-->
        <!--import js scripts here-->

        <script language="javascript">

            function bodyOnloadHandler() {
                console.log("body onload");
            }

            window.onload = function(e) {
                console.log("window loaded");
            };
        </script>
    </head>

    <body onload="bodyOnloadHandler()">

        Page contents go here.

    </body>
</html>

এবং আপনি Chrome কনসোলে "উইন্ডো লোডেড" (যা প্রথমে আসে) এবং "বডি অনলোড" উভয়ই দেখতে পাবেন। তবে আপনি ফায়ারফক্স এবং আইইতে কেবল "বডি অনলোড" দেখতে পাবেন। আপনি যদি window.onload.toString()IE & FF এর কনসোলগুলিতে " " চালনা করেন তবে আপনি দেখতে পাবেন:

"ফাংশন অনলোড (ইভেন্ট) {বডিঅনলোডহ্যান্ডলার ()}"

যার অর্থ "উইন্ডো.অনলোড = ফাংশন (ই) ..." অ্যাসাইনমেন্টটি ওভাররাইট করা হয়েছে।

— VincentZHANG
সূত্র

6

window.onloadএবং onunloadশর্টকাট document.body.onloadএবংdocument.body.onunload

document.onloadএবং onloadসমস্ত এইচটিএমএল ট্যাগে হ্যান্ডলার সংরক্ষণ করা মনে হয় তবে কখনও ট্রিগার হয়নি

' onload' নথিতে -> সত্য

— garaboncias
সূত্র

5

উইন্ডো.অনলোড তবে তারা প্রায়শই একই জিনিস থাকে। একইভাবে আইডি তে বডি.অনলোড উইন্ডো.অনলোড হয়ে যায়।

— AnthonyWJones
সূত্র

1

উইন্ডো.অনলোড স্ট্যান্ডার্ড, তবে - পিএস 3 এর ওয়েব ব্রাউজার (নেটফ্রন্টের উপর ভিত্তি করে) উইন্ডো অবজেক্টটি সমর্থন করে না, তাই আপনি এটি সেখানে ব্যবহার করতে পারবেন না।

— gotofritz
সূত্র

0

সংক্ষেপে

windows.onloadহয় আই ই দ্বারা সমর্থিত নয় 6-8
document.onload কোনও আধুনিক ব্রাউজার দ্বারা সমর্থিত নয় (ইভেন্টটি কখনই চালিত হয় না)

কোড স্নিপেট দেখান

window.onload   = () => console.log('window.onload works');   // fired
document.onload = () => console.log('document.onload works'); // not fired

স্নিপেট প্রসারিত করুন

— কামিল কিয়েসজেউস্কি
সূত্র

উইন্ডো.অনলোড বনাম ডকুমেন্ট.অনলোড

তারা কখন গুলি চালায়?

তারা কতটা সমর্থিত?

Update March 2017

1 ভ্যানিলা জাভাস্ক্রিপ্ট

2 jQuery

`Update March 2017`