$(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.
[code lang="js"]
<script type="text/javascript">;
$(document).ready(function(){
//DOM hazır olduğunda çağrılır
// Kod yeri
});
</script>
[/code]
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.
[code lang="js"]
<script type="text/javascript">
function pageLoad()
{
// sayfa tam olarak yükledikten sonra çalışır
// Kod girilir
}
</script>
[/code]
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.
[code lang="js"]
<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>
[/code]
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.
[code lang="js"]
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
Sys.Application.add_init(function()
{ // Bir kez çalışacak kod buraya girilir. });
</script>
[/code]
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.
Hiç yorum yok:
Yorum Gönder