Jassif Team Institution

JavaScript ஏற்ற நிகழ்வுகள்

உலாவி ஒரு உறுப்பை ஏற்றுதல் முடிந்தபோது ஏற்ற நிகழ்வுகள் நடக்கும்.

இரண்டு மிக முக்கியமான ஏற்ற நிகழ்வுகள்:

• DOMContentLoaded (HTML தயாராக இருக்கும் போது)
• load (பக்கங்கள், படங்கள், CSS போன்றவற்றுக்காக காத்திருக்கிறது)

DOMContentLoaded

உலாவி HTML ஐ முழுமையாக ஏற்றி Document Object Model (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>

படம் ஏற்ற ஆர்ப்பாட்டம்:

படம் ஏற்ற நிலை: ஏற்றப்படுகிறது...

புதிய படத்தை ஏற்றவும் மெதுவான ஏற்றம் படத் தகவல்

ஏற்ற நிகழ்வு ஒப்பீடு

சிறந்த நடைமுறைகள்

பயிற்சி