window.onload vs $(document).ready()

JavaScript'in window.onload ve jQuery'nin $(document).ready() yöntemleri arasındaki farklar nelerdir?

Çözüm

Readyolayı HTML belgesi yüklendikten sonra gerçekleşirken,onload` olayı daha sonra, tüm içerik (örneğin resimler) de yüklendiğinde gerçekleşir.

Onloadolayı DOM'da standart bir olayken,readyolayı jQuery'ye özgüdür. Ready olayının amacı, belge yüklendikten sonra mümkün olduğunca erken gerçekleşmesidir, böylece sayfadaki öğelere işlevsellik ekleyen kodun tüm içeriğin yüklenmesini beklemesi gerekmez.

Yorumlar (12)

window.onloadyerleşik bir JavaScript olayıdır, ancak uygulamasının tarayıcılar arasında (Firefox, Internet Explorer 6, Internet Explorer 8 ve [Opera][1]) *küçük* tuhaflıkları olduğundan, jQuery bunları soyutlayan ve sayfa DOM'u hazır olur olmaz ateşlenen (resimler vb. için beklemez)document.ready` sağlar.

$(document).ready(tanımsız olandocument.ready` değil) bir jQuery fonksiyonudur, aşağıdaki olayları sarar ve tutarlılık sağlar:

  • document.ondomcontentready / document.ondomcontentloaded - belge DOM yüklendiğinde (resimler vb. yüklenmeden bir süre önce olabilir) ateşlenen yeni bir olay; yine, Internet Explorer'da ve dünyanın geri kalanında biraz farklı
  • ve window.onload (eski tarayıcılarda bile uygulanmaktadır), tüm sayfa yüklendiğinde (resimler, stiller, vb.) ateşlenir
Yorumlar (8)

Internet Explorer ile $(document).ready() kullanımı konusunda bir uyarı. Bir HTTP isteği tüm belge yüklenmeden önce kesilirse (örneğin, bir sayfa tarayıcıya aktarılırken başka bir bağlantı tıklanırsa) IE $(document).ready olayını tetikleyecektir.

$(document).ready()` olayı içindeki herhangi bir kod DOM nesnelerine referans veriyorsa, bu nesnelerin bulunamaması ve Javascript hatalarının oluşması ihtimali vardır. Ya bu nesnelere yaptığınız referansları koruyun ya da bu nesnelere referans veren kodu window.load olayına erteleyin.

Bu sorunu diğer tarayıcılarda (özellikle Chrome ve Firefox) yeniden oluşturamadım

Yorumlar (3)