document.ready ve window.onload yada pageLoad arasındaki farklar

pageLoad() ve jQuery’nin $(document).ready() olaylarının aynı şeyi yaptığını sanırız. Her iki metod basit bir uygulamada kullanıldığında aynı sanılır fakat aralarında işleyiş olarak çok fark vardır. Bu makale bu farkları gösteremeye çalışacağım.

$(document).ready() metodunu tanıyalım

jQuery document.ready() metodu DOM hazır olur olmaz (yani tarayıcı HTML ayrıştırmasını yapıp, DOM ağacını inşa eder etmez) çağırılır. Bu işlem çapraz tarayıcı uyumludur yani her tarayıcıda aynı şekilde meydana gelir. Şayet web sayfanıza çok sayıda resim varsa işlem gerçekleşmesi için resimlerin tamamen yüklenmesi beklenmez.  Bundan dolayı PageLoad() metodundan önce çağrılır. Bir web sayfasında birden fazla document.ready() metodlarımız olabilir.

<script type="text/javascript">;

$(document).ready(function(){

//DOM hazır olduğunda çağrılır

// Kod yeri

});

</script>

pageLoad() metodunu tanıyalım

pageLoad() metodu sayfa ile ilişkili kaynaklar ve resimler tamemen yüklendikten sonra çalışır. Varsayalım web sayfanızda büyük boyutta resimleriniz var bu resimler yükleninceye kadar pageLoad() çalışmaz.
pageLoad() metodu tarayıcı uyumlu değildir.Bir web sayfasında sadece bir tane pageLoad() kullanabiliriz.

<script type="text/javascript">

function pageLoad()

{

// sayfa tam olarak yükledikten sonra çalışır

// Kod girilir

}

</script>

pageLoad() ve $(document).ready() ile Update Panel Kısmi Postback

Bildiğimiz gibi ASP.NET update panel sunucuya kısmi postback gerçekleştirir. Bundan dolayı $(document).ready() ve pageLoad()
metodlarını kullanıyorsanız, bu iki metod arasındaki farkı bilmek zorundasınız.

pageLoad() metodu update panel her kısmi postback işlemini gerçekleştiridiğinde çalışır fakat $(document).ready() metodu çalışmaz.  $(document).ready() sadece bir sefer çalışır (sayfa ilk kez yüklendiğinde). Bundan dolayı $(document).ready() metodu içerisinde yazılan kodlar  her kısmi postback gerçekleştiğinde başlamaz veya çalışmaz.

<script type="text/javascript">// <![CDATA[
function pageLoad()

{

// her kısmi postback işleminde çalışır

}

$(document).ready(function(){

// başlangıçta bir kere çalışır

});
</script>

<asp:ScriptManager ID="ScriptManger1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- Asp.net Kontolleri Buraya -->
</ContentTemplate>
 </asp:UpdatePanel>

 ASP.NET AJAX $(document).ready() metoduna alternatiftir

Şayet sayfanızda AJAX kullanıyorsanız tek sefer çalıştırma için $(document).ready() yerine  Application.add_init() metodunu kullanabilirsiniz.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
 <script type="text/javascript">
Sys.Application.add_init(function()
 { // Bir kez çalışacak kod buraya girilir. });
 </script>
 

Application.add_init metodunu ScriptManager’dan sonra kullanmak dikkat edilmesi gereken önemli bir husustur. Bunun  zorunlu olmasının sebebi ScriptManager Microsoft.js sınıfına referansı ekler. Sys nesnesini ScriptManager’dan önce referans vermeye çalışmak “sys is undefined” javascript hatasını verecektir.

Özetle :

1. $(document).ready()

  • Tek seferlik başlatma için en idealdir
  • DOM hazır olur olmaz çağrılır
  • Cross browser uyumludur
  • Kısmi postback sonucunda etkilenen sayfanın elemanlarının veya kontollerinin fonksiyonelliklerini  yeniden yüklemesini yapamaz veya yeninden uygulayamaz.

2.pageLoad()

  • Şayet bir UpdatePanel kullanıyorsanız tek seferlik çalıştırma için iyi bir tercih değildir
  • Cross browser uyumlu değildir
  • UpdatePanel’le yapılan kısmi postbackler sonucunda etkilenen sayfanın elemanları veya kontollerinin fonksiyonellikleri yeniden yükleme veya yeninde görevlerini yaptırmasını sağlamak için en idealidir.

3. Application.Init()

  • Sadece ASP.NET Ajax mevcutsa tek sefer çalıştırma için uygundur.
  • Şayet dikkatli kullanılmaz ise “sys is undefined” hatası meydana gelebilir

Sonuç

Bu makalede window.onload/pageLoad() ve document.ready() metodlarının aralarındaki farkları anlatmaya çalıştım. İnşallah faydalı bir makale olmuştur.

 

Muavenet

Web teknolojilerine merak salmış bir bilgisayar mühendisinin yazıları

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir