সম্পূর্ণ পৃষ্ঠা লোড পরে ফাংশন চালানো

Question

পৃষ্ঠা লোডের পরে কিছু বিবৃতি কার্যকর করতে আমি নীচের কোডটি ব্যবহার করছি।

 <script type="text/javascript">
    window.onload = function () { 

        newInvite();
        document.ag.src="b.jpg";
    }
</script>

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

Comments

আপনি জেএসফিডালটনে একটি ডেমো যুক্ত করতে পারেন ?

— কিছু

আপনি jQuery ব্যবহার করতে পারেন? যদি তা হয়, তবে চেষ্টা করুন$(window).load()

— ম্যাট হিন্টজকে

হ্যাঁ, আপনি ঠিক কী সঠিকভাবে কাজ করছে না তা ব্যাখ্যা করতে পারেন? আপনি কি ত্রুটি পেয়ে যাচ্ছেন, বা সম্ভবত আপনি alertউইন্ডোটি পুনরায় আঁকানোর আগে কোনও ফাংশনটি কল করছেন (এটিকে বোঝার আগে দেখে মনে হচ্ছে)? কোডটি দুর্দান্ত দেখাচ্ছে, এবং ব্যবহারকারীদের বড় লাইব্রেরিগুলি ডাউনলোড করতে বাধ্য করা সম্ভবত এই সমস্যাটি সমাধান করবে না বা নির্ণয় করা আরও সহজ করে না।

— জেফরি সুইনি

doxdesk.com/img/updates/20091116-so-large.gif

— জেফরি সুইনি

যখন আমি বলি এটি কাজ করছে না, তখন আমি বোঝাতে চাইছি কিছু চিত্র লোড করা হচ্ছে এমনকী ফাংশনটি বহিস্কার করা হবে।

— নীরজ কুমার

Answer 1

এটি আপনার পক্ষে কাজ করতে পারে:

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

বা যদি আপনার সান্ত্বনা jquery সঙ্গে হয়,

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

$(document).ready()ডোমকন্টেন্টলয়েডে আগুন লেগেছে, তবে ব্রাউজারগুলির মধ্যে এই ইভেন্টটি ধারাবাহিকভাবে গুলি চালানো হচ্ছে না। এ কারণেই jQuery সম্ভবত সমস্ত ব্রাউজারগুলিকে সমর্থন করার জন্য কিছু ভারী ভারসাম্য প্রয়োগ করবে। এবং এটি সরল জাভাস্ক্রিপ্ট ব্যবহার করে আচরণটি "ঠিক" করা খুব কঠিন করে তুলবে (তবে অবশ্যই এটি অসম্ভব নয়)।

জেফরি সুইনি এবং জে টরেসের পরামর্শ অনুসারে, setTimeoutনীচের মতো ফাংশনটি ফায়ার করার আগে, একটি ফাংশন করা ভাল বলে আমি মনে করি :

setTimeout(function(){
 //your code here
}, 3000);

Comments

readyওপি অনুরোধ করেছে jQuery এর কাজ করবে না। readyDOM লোড হলে আগুন লাগে, উপাদান লোড হওয়ার পরে নয়। loadউপাদানগুলি লোডিং / রেন্ডারিং শেষ করার পরে গুলি চালানো হবে।

— যায়েম টরেস

দেখে মনে হচ্ছে যে ওপি চায় যে সমস্ত উপাদানগুলি কেবলমাত্র এইচটিএমএল নয়, পুরো উপাদান লোড করা যায় load

— জেফরি সুইনি

@ শ্রীধর বা তিনি কাজের জন্য সঠিক সরঞ্জামটি ব্যবহার করতে পারেন ( load)।

— যায়েম টরেস

setTimeoutএকটি খারাপ ধারণা। এটি পৃষ্ঠাটি 3 সেকেন্ডের নীচে লোড করার উপর নির্ভর করে (বা আপনি কী মান পছন্দ করেন তার উপর নির্ভর করে n

— জেজেজে

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

— শ্রীধর

Answer 2

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

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

jQuery জন্য একই:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});

---

দ্রষ্টব্য: - নীচের মার্কআপটি ব্যবহার করবেন না (কারণ এটি অন্যান্য একই ধরণের ঘোষণাগুলিকে ওভাররাইট করে):

document.onreadystatechange = ...

Comments

এই ক্রস ব্রাউজারটি কি সমর্থিত

— নীলজাইকে

এই উত্তর অন্যদের তুলনায় অনেক ভাল। +1

— জাইদেজ

খুব ভালো! ধন্যবাদ।

— ফারজিন কানজি

Answer 3

আপনি jQuery ব্যবহার করতে পারেন, বোঝা দেখুন । তারপরে আপনি আপনার উপাদানটি লোডিং শেষ করার পরে চালানোর জন্য আপনার ফাংশনটি সেট করতে পারেন।

উদাহরণস্বরূপ, একটি সাধারণ চিত্র সহ একটি পৃষ্ঠা বিবেচনা করুন:

<img src="book.png" alt="Book" id="book" />

ইভেন্ট হ্যান্ডলারটি চিত্রের সাথে আবদ্ধ হতে পারে:

$('#book').load(function() {
  // Handler for .load() called.
});

লোড করার জন্য আপনার যদি বর্তমান উইন্ডোতে সমস্ত উপাদানগুলির প্রয়োজন হয়, আপনি ব্যবহার করতে পারেন

$(window).load(function () {
  // run code
});

Comments

JQuery loadপদ্ধতিটি জাভাস্ক্রিপ্ট ব্যবহার করে লোড ইভেন্টের সাথে কেবল কোনও ফাংশনকে আবদ্ধ করে না? ওপি ইতিমধ্যে যা করছে তার থেকে এটি কীভাবে আলাদা হবে?

— অ্যালেক্স ক্যালিকি

@ অ্যালেক্সকালিকি আফাইক, এটি কোনও আলাদা হবে না, বাদে jQuery addEventListenerDOM0 onloadসম্পত্তি বেঁধে রাখার পরিবর্তে ব্যবহার করতে পারে ।

— অ্যালনিটাক

@ অ্যালেক্সকালিকি আমি বলতে পারি না যে এটি হুবহু একই কার্যকারিতাটি ব্যবহার করে, তবে ডকুমেন্টেশন অনুসারে, jQuery নিশ্চিত করছে যে চিত্রগুলি সহ সমস্ত উপাদান এই আগুনের আগে বোঝা হয়ে গেছে। আমি বিশ্বাস করতে চাই যে যদি এই ঘটনাটি ঘটে তবে সেখানে অতিরিক্ত যুক্তি যুক্ত হতে পারে এবং ডকুমেন্টেশনকে অস্বীকার করার কোনও কারণ আমার নেই, যদিও আমি ওপি যে প্রতিবেদনটি প্রকাশ করছে, সেই একই ইস্যুতে আমি কখনই প্রবেশ করিনি।

— জাইমে টরেস

জিকুয়েরি v1.8 হিসাবে। লোড হ্রাস করা হয়েছে। উত্স

— অ্যাডোনিস কে। কাকুলিডিস

প্রশ্নের সর্বকালের সেরা সমাধান।

— রবার্তো সেপলভেদা ব্রাভো

Answer 4

আমি কিছুটা বিভ্রান্ত হয়েছি যে পৃষ্ঠা বোঝার দ্বারা আপনি কী বোঝাতে চেয়েছেন তা শেষ হয়েছে, "ডোম লোড" বা "সামগ্রী লোড "ও? এইচটিএমএল পৃষ্ঠায় লোড দুই প্রকারের ইভেন্টের পরে ঘটতে পারে।

1. ডোম লোড: যা পুরো ডিওএম ট্রি লোড লোড শুরু শেষ হওয়া নিশ্চিত করে। তবে রেফারেন্স সামগ্রীটি লোড করা নিশ্চিত করবেন না। ধরুন আপনি imgট্যাগগুলির মাধ্যমে চিত্রগুলি যুক্ত করেছেন , তাই এই ইভেন্টটি নিশ্চিত করে যে সমস্ত imgলোড হয়েছে তবে কোনও চিত্র সঠিকভাবে লোড হয়েছে কিনা। এই ইভেন্টটি পেতে আপনার নিম্নলিখিত পদ্ধতিতে লেখা উচিত:

   document.addEventListener('DOMContentLoaded', function() {
      // your code here
   }, false);

   বা jQuery ব্যবহার:

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

2. DOM এবং সামগ্রী লোডের পরে: যা DOM এবং সামগ্রী লোডকেও নির্দেশ করে। এটি কেবল imgট্যাগই তা নিশ্চিত করবে না এটি সমস্ত চিত্র বা অন্যান্য আপেক্ষিক সামগ্রী লোড করাও নিশ্চিত করবে। এই ইভেন্টটি পেতে আপনার নিম্নলিখিত পদ্ধতিতে লেখা উচিত:

   window.addEventListener('load', function() {...})

   বা jQuery ব্যবহার:

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

Comments

এখানে এটিই একমাত্র উত্তর যা একটি স্পষ্ট ব্যাখ্যা সহ ওপি-র জন্য একটি নন-

— জিকুয়েরি

@ হানিফ DOMContentLoadedইভেন্ট হ্যান্ডলার আমার পক্ষে কিছুই করার মনে হয় না তবে loadকরে।

— ব্র্যান্ডন বেনিফিল্ড

শেষ দুটি উদাহরণের জন্য কি লাইনগুলির শেষে সেমিকোলনগুলির প্রয়োজন নেই?

— আর নভেগা

Answer 5

আপনি যদি এইচটিএমএল পৃষ্ঠায় কোনও জেএস ফাংশনটিতে কল করতে চান তবে অনলোডের ইভেন্টটি ব্যবহার করুন। অনলোড লোড ইভেন্টটি ঘটে যখন ব্যবহারকারী এজেন্ট একটি ফ্রেমসেটের মধ্যে উইন্ডো বা সমস্ত ফ্রেম লোড করা শেষ করে। এই বৈশিষ্ট্যটি BODY এবং ফ্রেমসেট উপাদানগুলির সাথে ব্যবহার করা যেতে পারে।

<body onload="callFunction();">
....
</body>

Answer 6

এইভাবে আপনি উভয় ক্ষেত্রে পরিচালনা করতে পারবেন - যদি পৃষ্ঠাটি ইতিমধ্যে লোড হয়েছে বা না:

document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}

Answer 7

বিকল্পভাবে আপনি নীচে চেষ্টা করতে পারেন।

$(window).bind("load", function() { 
// code here });

এটি সব ক্ষেত্রেই কাজ করে। পুরো পৃষ্ঠাটি লোড হওয়ার পরে এটি ট্রিগার করবে।

Answer 8

আমি যতদূর জানি যতটা ব্যবহার করা ঠিক ততটাই আপনি বেজি হন

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

ব্যবহারের # 1 উত্তর DOMContentLoadedইভেন্টটি একটি ধাপ পিছনে রয়েছে কারণ সমস্ত সম্পত্তি লোড হওয়ার আগে ডিওএম লোড হবে।

অন্যান্য উত্তরগুলি সুপারিশ করে setTimeoutযার আমি দৃ strongly়তার সাথে বিরোধিতা করব কারণ এটি ক্লায়েন্টের ডিভাইস পারফরম্যান্স এবং নেটওয়ার্ক সংযোগের গতিতে সম্পূর্ণরূপে সাপেক্ষ। যদি কেউ ধীর নেটওয়ার্কে এবং / অথবা ধীরে সিপিইউ থাকে তবে একটি পৃষ্ঠা লোড হতে কয়েক থেকে কয়েক সেকেন্ড সময় নিতে পারে, সুতরাং আপনি কতটা সময় অনুমান করতে পারবেন নাsetTimeout প্রয়োজন ।

যেমনটি readystatechange, এমডিএনreadyState অনুসারে পরিবর্তনগুলি ঘটনার আগেই থাকবে তখনই এটি জ্বলে ওঠে ।load

সম্পূর্ণ

রাজ্যটি বোঝায় যে লোড ইভেন্টটি প্রায় আগুন লাগাচ্ছে।

Answer 9

window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}

Comments

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

— yivi

@yivi যদি একটি স্বয়ংক্রিয় বার্তা না: এটা যে কেউ যে কোড মানে, বিশেষত যেহেতু কোডে মন্তব্য নেই .. বেশ সুস্পষ্ট

— bluejayke

Answer 10

যদি আপনি কোনও জেএস ফ্রেমওয়ার্ক ব্যবহার না করে থাকেন তবে ক্রস ব্রাউজারের সামঞ্জস্যের সাথে এই প্রকল্পটি ডোম প্রস্তুত রাজ্যের সেরা উপায় project

https://github.com/ded/domready/blob/master/ready.js

Answer 11

আপনি যদি ইতিমধ্যে jQuery ব্যবহার করেন তবে আপনি এটি চেষ্টা করতে পারেন:

$(window).bind("load", function() {
   // code here
});

Comments

ব্যাখ্যা ব্যতিরেকে।

— ড্যানিয়েল ডাব্লু।

Answer 12

আমি আপনাকে বলতে পারি যে আমার সবচেয়ে ভাল উত্তরটি পাওয়া গেছে তা হ'ল </body>কমান্ডের ঠিক পরে "ড্রাইভার" স্ক্রিপ্ট স্থাপন করা । এটি উপরের কয়েকটি সমাধানের চেয়ে সবচেয়ে সহজ এবং সম্ভবত সর্বজনীন।

পরিকল্পনা: আমার পৃষ্ঠায় একটি টেবিল রয়েছে। আমি টেবিলটি দিয়ে পৃষ্ঠাটি ব্রাউজারে লিখি, তারপরে এটি জেএস দিয়ে বাছাই করুন। ব্যবহারকারী কলাম শিরোনাম ক্লিক করে এটি রিসর্ট করতে পারেন।

টেবিলটি একটি </tbody>কমান্ড শেষ হওয়ার পরে এবং দেহটি শেষ হয়ে যাওয়ার পরে, আমি টেক্সট 3 দ্বারা সারণিটি সাজানোর জন্য বাছাই করা জেএসকে অনুরোধ করতে নীচের লাইনটি ব্যবহার করছি I আমি ওয়েব থেকে বাছাই স্ক্রিপ্ট পেয়েছি যাতে এটি এখানে পুনরুত্পাদন করা হয় না। কমপক্ষে পরের বছর, আপনি এটিকে জেএস সহ চালিয়ে দেখতে পারেন static29.ILikeTheInternet.com। পৃষ্ঠার নীচে "এখানে" ক্লিক করুন। এটি সারণী এবং স্ক্রিপ্টগুলির সাথে অন্য পৃষ্ঠাটি নিয়ে আসবে। আপনি এটি ডেটা স্থাপন করে দেখতে পাচ্ছেন তাড়াতাড়ি এটিকে সাজান। আমার এটির গতি আরও বাড়ানো দরকার তবে বেসিকগুলি এখন সেখানে।

</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

MakerMikey

Answer 13

এই jQuery ব্যবহার করে দেখুন :

$(function() {
 // Handler for .ready() called.
});

Comments

readyওপি অনুরোধ করেছে jQuery এর কাজ করবে না। readyDOM লোড হলে আগুন লাগে, উপাদান লোড হওয়ার পরে নয়। loadউপাদানগুলি লোডিং / রেন্ডারিং শেষ করার পরে গুলি চালানো হবে।

— জাইমে টরেস

Answer 14

সম্পূর্ণ পৃষ্ঠা লোড সেট সময় শেষ হওয়ার পরে একটি ফাংশন কল করুন

setTimeout(function() {
   var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
	for(var i, j = 0; i = ddl2.options[j]; j++) {
		if(i.text == val) {      
			ddl2.selectedIndex = i.index;
			break;
		}
	} 
}, 1000);

Answer 15

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

function getDocReadyPromise()
{
  function promiseDocReady(resolve)
  {
    function checkDocReady()
    {
      if (document.readyState === "complete")
      {
        clearInterval(intervalDocReady);
        resolve();
      }
    }
    var intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

অবশ্যই, যদি আপনাকে আইই সমর্থন করতে না হয়:

const getDocReadyPromise = () =>
{
  const promiseDocReady = (resolve) =>
  {
    const checkDocReady = () =>
      ((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
    let intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

এই ফাংশনটি সহ, আপনি নিম্নলিখিতগুলি করতে পারেন:

getDocReadyPromise().then(whatIveBeenWaitingToDo);

Answer 16

আমি ওয়েব উপাদানগুলি ব্যবহার করছি যাতে এটি আমার জন্য কার্যকর হয়:

document.addEventListener('WebComponentsReady', function() {
       document.querySelector('your-element').show();
});

Answer 17

বডি ট্যাগ শেষ হওয়ার পরে আপনার স্ক্রিপ্টটি রাখুন ... এটি কার্যকর ...