HTML/JS aşırı yükleme konsepti, yüklendikten sonra web sayfasının davranışını kontrol etmenize yardımcı olabilir.
Bir web sayfasını yüklemek, sayfa içeriğinin, resimlerin ve diğer kaynakların tamamen yüklenmesini beklemeyi içerir.
Bazı web sayfaları, her şeyin yüklenmesi bitene kadar belirli işlevlerin gerçekleşmemesini sağlar. Bir örnek, yalnızca sayfa yüklendikten sonra bir veritabanından veri almayı içerir.
Bir web sayfasının tamamen yüklenip yüklenmediğini kontrol etmenin farklı yolları vardır. JavaScript olay işleyicilerini kullanarak olayları dinleyebilirsiniz, pencere.onload JavaScript olayı veya aşırı yük HTML özelliği.
Body HTML Öğesiyle onLoad Nasıl Kullanılır?
Web sayfasının gövdesinin yüklenip yüklenmediğini kontrol etmek için JavaScript olaylarını kullanabilirsiniz. Kodu çalıştırmak için bazı sayfa içeriğine sahip bir HTML dosyasına ve bir JavaScript dosyasına ihtiyacınız olacak.
Bu projede kullanılan kod bir GitHub deposu ve MIT lisansı altında ücretsiz olarak kullanabilirsiniz.
- adlı yeni bir HTML dosyasında index.html, aşağıdaki temel HTML kodunu ekleyin:
html>
<html>
<KAFA>
<başlık>Aşırı yük kullanan örnekbaşlık>
KAFA>
<vücut>
<h1>onload() kullanan örnekh1>
<P>Bu örnek, JavaScript'te onload() olayının nasıl kullanılacağını gösterir.P>
vücut>
html> - adlı aynı klasörde yeni bir dosya oluşturun. komut dosyası.js. Komut dosyası etiketini kullanarak bu dosyayı HTML sayfanıza bağlayın. Komut dosyası etiketini gövde etiketinin altına ekleyebilirsiniz:
<vücut>
içeriğiniz
<senaryokaynak="script.js">senaryo>
vücut> - HTML gövde etiketinizdeki içeriğin içine boş bir paragraf etiketi ekleyin.
<PİD="çıktı">P> - JavaScript dosyasının içine şunu ekleyin: pencere.onload olay işlevi. Bu, sayfa yüklendiğinde yürütülür:
pencere.onload = işlev() {
// sayfa yüklendiğinde çalışacak kod
}; - İşlevin içinde, boş paragraf etiketinin içeriğini doldurun. Bu, paragraf etiketini yalnızca sayfa yüklendiğinde bir mesaj gösterecek şekilde değiştirir:
belge.getElementById("çıktı").içHTML = "Sayfa yüklendi!"; - Alternatif olarak, şunları da yapabilirsiniz: olay dinleyicisi kullan için dinlemek DOMContentYüklendi etkinlik. DOMContentYüklendi window.onload'dan önce tetikler. Tüm harici kaynakların yüklenmesini beklemek yerine, HTML belgesi hazır olur olmaz tetiklenir.
belge.addEventListener("DOMContentYüklendi", işlev() {
belge.getElementById("çıktı").içHTML = "Sayfa yüklendi!";
}); - Sayfanın yüklenmesi bittiğinde mesajı görüntülemek için index.html dosyasını bir web tarayıcısında açın:
- Bir sayfanın yüklenip yüklenmediğini kontrol etmek için JavaScript olaylarını kullanmak yerine, aşırı yük Aynı sonuç için HTML özelliği. onload özelliğini HTML dosyanızdaki body etiketine ekleyin:
<vücutaşırı yük="içinde()"> - Oluştur içinde() JavaScript dosyasının içindeki işlev. Hem onload HTML özniteliğinin hem de onload JavaScript olayının aynı anda kullanılması önerilmez. Bunu yapmak, beklenmedik davranışlara veya iki işlev arasında çakışmalara yol açabilir.
işleviçinde() {
belge.getElementById("çıktı").içHTML = "Sayfa yüklendi!";
}
JavaScript olay dinleyicilerini ve pencere.onload HTML üzerinden yöntem aşırı yük özelliği, çünkü web sayfasının davranışını ve içeriğini ayrı tutmak iyi bir uygulamadır. Ayrıca JavaScript olay dinleyicileri, diğer iki yönteme göre daha fazla uyumluluk ve esneklik sağlar.
Image HTML Elementiyle onLoad Nasıl Kullanılır?
Sayfada diğer öğeler yüklendiğinde kodu çalıştırmak için onload olayını da kullanabilirsiniz. Bunun bir örneği görüntü öğesidir.
- index.html dosyanızla aynı klasörün içine herhangi bir resim ekleyin.
- HTML dosyasının içine bir resim etiketi ekleyin ve src özniteliğini klasörde kayıtlı resmin adına bağlayın.
<imgİD="benim görselim"kaynak="Pidgeymon.png"Genişlik="300"> - Resim yüklendiğinde bir mesaj görüntülemek için başka bir boş paragraf etiketi ekleyin:
<PİD="imageLoadedMessage">P> - JavaScript dosyasının içine, resme bir onload olayı ekleyin. Benzersiz kimliği kullan benim görselim onload olayının hangi görüntü öğesine ekleneceğini belirlemek için:
var resmim = belge.getElementById("benim görselim");
myImage.onload = işlev() {
}; - Onload olayının içinde, eklemek için iç HTML'yi değiştirin. Resim yüklendi İleti:
belge.getElementById("imageLoadedMessage").içHTML = "Resim yüklendi!"; - Kullanmak yerine myImage.onloaddinlemek için bir olay dinleyicisi de kullanabilirsiniz. yük JavaScript olayı:
myImage.addEventListener('yük', işlev() {
belge.getElementById("imageLoadedMessage").içHTML = "Resim yüklendi!";
}); - Resmi ve mesajı görüntülemek için index.html'yi bir web tarayıcısında açın:
- Aynı sonuç için onload HTML özelliğini de kullanabilirsiniz. Gövde etiketine benzer şekilde, img etiketine bir aşırı yükleme özelliği ekleyin:
<imgİD="benim görselim"kaynak="Pidgeymon.png"Genişlik="300"aşırı yük="resimYüklendi()"> - Görüntü yüklendiğinde kodu yürütmek için işlevi JavaScript dosyasına ekleyin:
işlevgörüntüYüklendi() {
belge.getElementById("imageLoadedMessage").içHTML = "Resim yüklendi!";
}
JavaScript Yüklenirken onLoad Nasıl Kullanılır?
Tarayıcının JavaScript dosyasını yüklemeyi bitirip bitirmediğini kontrol etmek için HTML onload özelliğini kullanabilirsiniz. Komut dosyası etiketi için eşdeğer bir JavaScript aşırı yükleme olayı yok.
- Onload niteliğini HTML dosyanızdaki script etiketine ekleyin.
<senaryokaynak="script.js"aşırı yük="YüklüJs()">senaryo> - İşlevi JavaScript dosyanıza ekleyin. tarafından bir mesaj yazdır tarayıcı konsolunda oturum açma:
işlevYüklü J'ler() {
konsol.kayıt("JS tarayıcı tarafından yüklendi!");
} - index.html dosyasını tarayıcıda açın. Yapabilirsiniz Chrome DevTools'u kullanın konsola çıkan tüm mesajları görüntülemek için.
Web Sayfalarını Tarayıcıya Yükleme
Artık bir web sayfasının yüklenmesi tamamlandığında belirli kodları yürütmek için işlevleri ve olayları kullanabilirsiniz. Sayfaları yüklemek, sorunsuz ve kesintisiz bir kullanıcı deneyimi oluşturmada büyük bir faktördür.
Daha ilginç yükleme sayfası tasarımlarını web sitenize nasıl entegre edebileceğiniz hakkında daha fazla bilgi edinebilirsiniz.
