Jassif Team Institution

জাভাস্ক্রিপ্ট লোডিং ইভেন্ট

ব্রাউজার যখন একটি উপাদান লোড করা শেষ করে তখন লোড ইভেন্টগুলি ঘটে৷

দুটি সবচেয়ে গুরুত্বপূর্ণ লোডিং ইভেন্ট হল:

• DOMContentLoaded(এইচটিএমএল প্রস্তুত হলে)
• load(পৃষ্ঠা, ছবি, CSS, ইত্যাদির জন্য অপেক্ষা করা হচ্ছে)

DOMContentLoaded

ব্রাউজার সম্পূর্ণরূপে HTML লোড করার পরে এবং ডকুমেন্ট অবজেক্ট মডেল (DOM) ট্রি তৈরি করেDOMContentLoadedইভেন্টটি ট্রিগার করা হয়েছে, কিন্তু বাহ্যিক সম্পদ যেমন ইমেজ এবং স্টাইলশীট লোড করা সম্পূর্ণ হয়নি।

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

<p id="demo"></p>

<script>
// Add Event Listener to document
document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("demo").innerHTML = "HTML is loaded!";
});
</script>

Window Load

সমস্ত নির্ভরশীল সংস্থান যেমন ছবি, স্টাইলশীট এবং সাব-ফ্রেম সহ সম্পূর্ণ পৃষ্ঠাটি সম্পূর্ণরূপে লোড হওয়ার পরেloadঘটনা ট্রিগার হয়.

loadইভেন্টটি এমন ক্রিয়াগুলির জন্য দুর্দান্ত যেগুলির জন্য সমস্ত সংস্থান উপলব্ধ থাকা প্রয়োজন, উদাহরণস্বরূপ একটি চিত্রের মাত্রা পাওয়া বা ব্রাউজারের ধরন পরীক্ষা করা৷

<p id="demo"></p>

<script>
// Add Event Listener to window
window.addEventListener("load", function () {
  document.getElementById("demo").innerHTML = "Page is fully loaded!";
});
</script>

পৃষ্ঠা লোড হচ্ছে টাইমলাইন প্রদর্শন

অন্যান্য লোডিং ইভেন্ট

loadইভেন্টটি অন্যান্য উপাদানগুলিতেও ব্যবহার করা যেতে পারে যা সংস্থানগুলি গ্রহণ করে (শুধু পৃষ্ঠা নয়):

ছবি ফুটে উঠছে

<img id="myImg"
src="https://www.w3schools.com/images/w3schools_green.jpg" width="120">

<p id="demo"></p>

<script>
const img = document.getElementById("myImg");

// Add Event Listener to img
img.addEventListener("load", function () {
  document.getElementById("demo").innerHTML = "Image loaded!";
});
</script>

চিত্র লোডিং প্রদর্শন:

ছবি লোড হচ্ছে: লোড হচ্ছে...

একটি নতুন ছবি আপলোড করুন একটি ধীর বৃদ্ধি ইমেজ তথ্য

লোড ইভেন্ট তুলনা

সর্বোত্তম অনুশীলন

অনুশীলন করুন