Web2.0 tarzı web applikasyonları için javascript ile geliştirme yaparken karşılaşılma ihtimali en yüksek olan sorunlardan biri javascript yüklenme süresidir. Geliştirme yaparken <javascript src=”” şeklinde js dosyasının tanımı yapıldığı zaman tarayıcı o js dosyasının indirip çalıştırıncaya kadar sayfanın akışını bekletir (her tarayıcı özellikleri farklıdır, bazı tarayıcılar js dosyalarını paralel olarak indirip çalıştırma işlemini sıra ile yapar). Bu bekleme anları uzun sürerse sayfa gösterimi gecikeceği için yazdığını web applikasyonu yavaş çalışıyor damgası yiyecektir.
Javascriptlerin bu tür sorununa çözüm için Lazy loading tekniği geliştirilmiştir. Lazy loading javascript dosyalarının yüklenmesini ileriki bir zamana atarak sayfa gösterimini hızlandırmayı amaçlar. bir javascript dosyası siz istemediğiniz sürece yüklenmez böylece daha hızlı sayfa yüklemesi ve daha kullanışlı bir applikasyon ortaya çıkar.
Örneğin aşağıdaki kod sayfa yüklendikten 100ms sonra js dosyasını yükletir ve çalıştırır
<html>
<head>
<script>
function loadAndRun(jsName){
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.type = 'text/javascript';
script.src = jsName;
head.appendChild(script);
}
window.onload = function(){window.setTimeout(function(){loadAndRun("test.js");}, 500);}
</script>
</head>
<body>
</body>
</html>
Aşağıda test.js dosyasının içeriği var.
alert('i am test.js');
Yukarıdaki test kodları çalıştırıldığı zaman sayfa onload olduktan 500ms sonra test.js yüklenir ve çalıştırılır. bu özelliği kullanarak daha sonra da yüklense olur dediğiniz js dosyalarını bu şekilde yükleyebilirsiniz.
Eğer lazy load işinize yarayacak ise tavsiyem hazır fonksiyonlar ya da kütüphane kullanmanız böylece lazy load işleminden daha çok verim alırsınız.
Typhoon 