Sayfa tamamen yüklendiğinde bir işlev nasıl yürütülür?

306

Sayfa tamamen yüklendiğinde bazı JavaScript kodlarını çalıştırmam gerekiyor. Buna görüntüler gibi şeyler de dahildir.

DOM'un hazır olup olmadığını kontrol edebileceğinizi biliyorum, ancak bunun sayfanın tamamen yüklendiği zamankiyle aynı olup olmadığını bilmiyorum.

javascript

— Ben Shelock
kaynak

7

Peki, DOM'un hazır olup olmadığını nasıl kontrol edersiniz?

— Mads Skjern

441

Buna denir load. DOM için hazır hale gelmeden önce waaaaay geldi ve DOM hazır aslında loadgörüntülerde beklemenin nedeni için yaratıldı .

window.addEventListener('load', function () {
  alert("It's loaded!")
})

— Matchu
kaynak

3

bu nedenle, her sayfa bileşeni / kaynak (yani * resimler dahil *) window.onloadolduğunda DOM hazırlığına kıyasla (açıklayabilirsem) açıklığa kavuşturmak için çağrılır . Haklı mıyım?

— BreakPhreak

19

@BreakPhreak: yes :) onloadbelgenin bir parçası olan tüm kaynakları bekler. Bu, elbette, belgenin kendisinin bir parçası olmayan dinamik olarak oluşturulan istekleri, örneğin bir AJAX isteğini hariç tutar.

— Matchu

3

script tamamen yüklenmedi

— HD ..

Senaryom dinamik olarak yüklenebilir ve işleyicimi eklemeden önce "load" olayı meydana gelirse ne olur?

— pamelus

31

Daha iyi bir yol addEventListener("load", function(){... özelliğinin })üzerine yazmak yerine onload.

— user4642212

30

Genellikle kullanabilirsiniz window.onload, ancak window.onloadgeri / ileri geçmişi düğmelerini kullandığınızda son tarayıcıların tetiklenmediğini fark edebilirsiniz .

Bazı insanlar bu soruna geçici bir çözüm bulmak için garip eğilme önermek , ama gerçekten sadece bir window.onunloadişleyici (hiçbir şey yapmayan bir bile) yaparsanız, bu önbellekleme davranışı tüm tarayıcılarda devre dışı bırakılır . MDC oldukça iyi bu "özelliğini" belgeleyen, ama nedense kullanan insanlar hala var setIntervalve diğer garip kesmek.

Opera'nın bazı sürümlerinde, sayfanızda bir yere eklenerek çözülebilecek bir hata vardır:

<script>history.navigationMode = 'compatible';</script>

Yalnızca görüntüleme başına bir kez çağrılan bir javascript işlevi almaya çalışıyorsanız (ve DOM'un yüklenmesi tamamlandıktan sonra değil), böyle bir şey yapabilirsiniz:

<img src="javascript:location.href='javascript:yourFunction();';">

Örneğin, bir yükleme ekranında önbelleğe çok büyük bir dosyayı önceden yüklemek için bu hileyi kullanıyorum:

<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">

— geocar
kaynak

Herkes bu hilenin nasıl çalıştığını açıklayabilir mi? Benim için çok karmaşık, doh ..

— Razzle

20

Tamlık uğruna, şimdi yaygın olarak desteklenen DOMContentLoaded'e de bağlamak isteyebilirsiniz.

document.addEventListener("DOMContentLoaded", function(event){
  // your code here
});

Daha fazla bilgi: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— mürb
kaynak

7

Bu cevap, soruda sorulan soruların tam tersidir.

— Muhammed bin Yusrat

2

Gerçekten de DOMContentLoaded olayı, tüm DOM içerikleri yüklendiğinde, tüm bağımlılıkları yüklenmeden önce tetiklenir. Yanıtlar dizisindeki kullanıcılar referans $.readyverdiği için iyi bir katkı yaptığını düşündüm. Btw. Bana kalırsa doğru addEventListeneriçin de kullanılan yöntem load: Eğer birden fazla geri aramalar olmasını sağlar gibi olsa olaywindow.addEventListener("load", function(event){ // your code here });

— mürb

16

Bunu deneyin Yalnızca Tüm Sayfa Yüklendikten Sonra Çalıştırın

Javascript tarafından

window.onload = function(){
    // code goes here
};

Jquery adlı geliştiriciden

$(window).bind("load", function() {
    // code goes here
});

— absiddiqueLive
kaynak

1

$(window)bunun jquery olacağını düşündürüyor - değil mi? Yoksa bazı javascript sözdizimi karışıyor mu? (JS'de yeniyim).

— Azendale

2

neden sadece $(document).ready();jQuery mevcutken kullanmıyorsunuz ?

— Andreas

sizinki belgedir (az çok ayrıştırılmış HTML), diğeri ("load") resimler ve stiller dahil her şeydir . İhtiyacınız olan şeye bağlıdır.

— amenthes

11

Bu kodu deneyin

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

daha fazla bilgi için https://developer.mozilla.org/tr-TR/docs/DOM/document.readyState adresini ziyaret edin .

— Jacob Nelson
kaynak

Evet, bu yardımcı oldu. Çok teşekkürler ~

— Bravo Yeung

2

"interactive"tam yüklü değil. "complete"tamamen yüklü

— Ryan Walker

Sonunda! Bir milyon teşekkürler, Jacob. Burada listelenen tüm sayısız yöntem başarısız oldu (en iyisi, bir radyo düğmesi güncellenir ve sonuçta bir hesaplama yapılabilir, ancak düğme basılı görünmez), yönteminiz hile yapar.

— secr

8

window.onload olayı, görüntüler vb. dahil her şey yüklendiğinde tetiklenir.

JS kodunuzun mümkün olduğunca erken çalışmasını istiyorsanız DOM hazır durumunu kontrol etmek istersiniz, ancak yine de DOM öğelerine erişmeniz gerekir.

— codefly
kaynak

8

onLoad()Olayı kullanan Javascript , yürütmeden önce sayfanın yüklenmesini bekleyecektir.

<body onload="somecode();" >

JQuery çerçevesinin belgeye hazır işlevini kullanıyorsanız, DOM yüklenir yüklenmez ve sayfa içeriği yüklenmeden önce kod yüklenir:

$(document).ready(function() {
    // jQuery code goes here
});

— Defoncesko
kaynak

7

Window.onload komutunu kullanmak isteyebilirsiniz , çünkü dokümanlar hem DOM hazır, hem de sayfadaki diğer öğelerin TÜMÜ (resimler vb.) Yükleninceye kadar tetiklenmediğini gösterir.

— Marc Novakowski
kaynak

Ah harika. Bunu ben yaptım. Sayfadaki son resim şudur: <img src = "imdbupdate.php? Update = ajax" style = "display: hidden" onload = "window.location = 'movies.php? Do = admincp'" /> Ancak beni yönlendirmiyor

— Ben

...ne? Bir resim yüklendiğinde yeniden yönlendirmek ister misiniz?

— Matchu

Bunu neden isteyeceğinizden emin değilim, ancak yönlendirmemesinin nedeni ekran olabilir: gizli ve bu nedenle tarayıcı gösterilmeyeceği için yüklemeye zahmet etmiyor.

— Matchu

belki sadece bir hit izlemek veya DB bir şey yapmak gibi sunucuda önemli bir şey yapan gizli bir görüntü?

— Marc Novakowski

Bunu alabilirim, ama sonra yönlendirmesini sağlamak benim için bir anlam ifade etmiyor. Kullanıcının sayfada zaman geçirmesini istemiyorsanız neden sayfanın tamamı var? Ve eğer amaç yükte yeniden yönlendirme yapmaksa, genel olarak daha temiz bir uygulama olduğundan neden sadece bir window.onload olayı kullanmıyorsunuz?

— Matchu

3

Ve PrototypeJS ile yapmanın bir yolu :

Event.observe(window, 'load', function(event) {
    // Do stuff
});

— Mark Biek
kaynak

2

Modern javascriptli modern tarayıcılarda (> = 2015) type="module"komut dosyası etiketinize ekleyebilirsiniz ve bu komut dosyasının içindeki her şey tüm sayfa yüklendikten sonra yürütülür. Örneğin:

<script type="module">
  alert("runs after") // Whole page loads before this line execute
</script>
<script>
  alert("runs before")
</script>

ayrıca eski tarayıcılar nomoduleözelliği anlayacaktır . Bunun gibi bir şey:

<script nomodule>
  alert("tuns after")
</script>

Daha fazla bilgi için javascript.info adresini ziyaret edebilirsiniz .

— Pouria Moosavi
kaynak

1

Bunun yerine birçok `onload`kullanımı kullanmanız gerekiyorsa `$(window).load`(jQuery):

$(window).load(function() {
    //code
});

— Sebastien Horin
kaynak

1

Onload GlobalEventHandlers mixin malı bir yük olay için bir olay işleyicisi vb Pencere, XMLHttpRequest, eleman, kaynak yüklendikten ateşler.

Yani temelde javascript zaten pencerede görüntüler dahil olmak üzere hangi sayfanın tam olarak yüklendi yürütme yöntemi vardır ...

Bir şeyler yapabilirsiniz:

var spinner = true;

window.onload = function() {
  //whatever you like to do now, for example hide the spinner in this case
  spinner = false;
};

— Alireza
kaynak

-1

2019 güncellemesi: Bu benim için çalışan cevaptı. Liste öğelerini saymak için önce veri göndermek ve veri döndürmek için birden fazla ajax isteğine ihtiyaç duyduğumdan.

$(document).ajaxComplete(function(){
       alert("Everything is ready now!");
});

— Norcal Johnny
kaynak

Sayfa tamamen yüklendiğinde bir işlev nasıl yürütülür?

Bunun yerine birçok onloadkullanımı kullanmanız gerekiyorsa $(window).load(jQuery):

Bunun yerine birçok `onload`kullanımı kullanmanız gerekiyorsa `$(window).load`(jQuery):