Yuklanish hodisalari
Yuklash hodisalari brauzer elementni yuklashni tugatgandan so‘ng sodir bo‘ladi.
Ikkita eng muhim yuklanish hodisasi:
- DOMContentLoaded (HTML tayyor bo‘lganda)
- load (sahifalar, rasmlar, CSS va boshqalar yuklanishini kutadi)
DOMContentLoaded
DOMContentLoaded hodisasi brauzer HTML’ni to‘liq yuklab, Document Object Model (DOM) daraxtini qurib bo‘lganda ishga tushadi, ammo rasmlar va stil jadvallari kabi tashqi resurslar hali to‘liq yuklanmagan bo‘lishi mumkin.
DOMContentLoaded hodisasi foydalanuvchi interfeysini ishga tushirish, hodisa ishlov beruvchilarini biriktirish va faqat DOM tayyor bo‘lishini talab qiladigan amallarni bajarish uchun eng yaxshisidir.
Misol
<p id="demo"></p>
<script>
// Add Event Listener to document
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("demo").innerHTML = "HTML is loaded!";
});
</script>
O‘zingiz sinab ko‘ring »
Oynaning yuklanishi
Yuklash hodisasi butun sahifa, jumladan, rasmlar, uslublar jadvallari va pastki frameworklar kabi barcha bog‘liq manbalar to‘liq yuklanganda ishga tushadi.
Yuklash hodisasi tasvir o‘lchamlarini olish yoki brauzer turini tekshirish kabi barcha mavjud resurslarni talab qiladigan harakatlar uchun eng yaxshisidir.
Misol
<p id="demo"></p>
<script>
// Add Event Listener to window
window.addEventListener("load", function () {
document.getElementById("demo").innerHTML = "Page is fully loaded!";
});
</script>
O‘zingiz sinab ko‘ring »
Boshqa yuklanish hodisalari
Yuklanish hodisasi resurslarni oladigan boshqa elementlarda ham ishlatilishi mumkin (nafaqat sahifalar):
| Teg | Tavsif |
|---|---|
| <img> | Rasm yuklash tugagach, ishga tushadi. |
| <script> | Skript muvaffaqiyatli yuklangan va bajarilganda ishga tushadi. |
| <link> | Uslublar jadvali to‘liq yuklangan va tahlil qilinganda ishga tushadi. |
| <video> | Mediaga oid turli yuklanish hodisalarini ishga tushiradi. |
Shuningdek qarang:
Batafsil ma’lumot va misollar uchun:
Rasmning yuklanishi
Misol
<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>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!