MohirDox

Ko'rinishi

JavaScript yuklanish hodisalari ​

Yuklanish hodisalari brauzer biror elementni yuklashni tugatganda sodir bo'ladi.

Ikki eng muhim yuklanish hodisasi:

  • DOMContentLoaded (HTML tayyor bo'lganda)
  • load (sahifalar, rasmlar, CSS va h.k.larni kutadi)

DOMContentLoaded ​

DOMContentLoaded hodisasi brauzer HTML-ni to'liq yuklab, Hujjat Obyekt Modeli (DOM) daraxtini qurib bo'lganda ishga tushadi, lekin rasmlar va uslublar kabi tashqi resurslarni yuklash hali tugallanmagan bo'lishi mumkin.

DOMContentLoaded hodisasi foydalanuvchi interfeysini initsializatsiya qilish, hodisa ishlovchilarini biriktirish va faqat DOM-ning tayyor bo'lishini talab qiladigan harakatlarni bajarish uchun eng mos keladi.

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

<script>
  // Hujjatga hodisa tinglovchisini qo'shish
  document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('demo').innerHTML = 'HTML yuklandi!'
  })
</script>

Window Load ​

load hodisasi butun sahifa, barcha bog'liq resurslar (rasmlar, uslublar jadvali va sub-freymlar) bilan birga to'liq yuklanganda ishga tushadi.

load hodisasi barcha resurslarning mavjudligini talab qiladigan harakatlar uchun eng mos keladi, masalan, rasmning o'lchamlarini olish yoki brauzer turini tekshirish.

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

<script>
  // Window (oyna) uchun hodisa tinglovchisini qo'shish
  window.addEventListener('load', function () {
    document.getElementById('demo').innerHTML = "Sahifa to'liq yuklandi!"
  })
</script>

Boshqa yuklanish hodisalari ​

load hodisasi resurslarni olib keladigan boshqa elementlarda ham ishlatilishi mumkin (faqat sahifalarda emas):

TegTavsif
<img>Rasm yuklab bo'linganda ishga tushadi.
<script>Skript muvaffaqiyatli yuklanib bajarilganda ishga tushadi.
<link>Uslublar jadvali (CSS) to'liq yuklanib tahlil qilinganda ishga tushadi.
<video>Mediani yuklash bilan bog'liq turli xil hodisalarni keltirib chiqaradi.

Rasmni yuklash misoli ​

html
<img id="myImg" src="w3schools_green.jpg" width="120" />
<p id="demo"></p>

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

  // Rasm uchun hodisa tinglovchisini qo'shish
  img.addEventListener('load', function () {
    document.getElementById('demo').innerHTML = 'Rasm yuklandi!'
  })
</script>

Shuningdek qarang: ​

Batafsil ma'lumot va misollar uchun: