Css ve jquery kullanarak loader, preloader, önyükleme yapımı.
Sayfadaki tüm öğeler yüklenmeden sayfayı göstermek istemiyorsanız bu basit preloader kodunu kullanabilirsiniz. İhtiyacınız olan bir yükleyici gif ile aşağıdaki basit css ve jquery kodları.
<!--Seçici özelliğini kullanmak için bir id verdiğimiz bir div oluşturuyoruz.-->
<div id="preloader"></div>
<!--Tanımladığımız div için stil yapılandırmasını ve gif görselini ekliyoruz-->
<style>
.js div#preloader { position: fixed; left: 0; top: 0; z-index: 3000; width: 100%; height: 100%; overflow: visible; background: #000 url('../images/lamp_orange.gif') no-repeat center center; }
</style>
<!--div etiketinin gösterilmesi ve tüm öğeler yüklendiğinde kaybolması için jquery kodumuzu yazıyoruz.-->
<script>
jQuery(document).ready(function($) {
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
});
</script>Script kodunu sayfanın en altına, stil kodunu yapılandırmanızın en üstüne eklemeniz sorun çıkma olasılığını en aza indirir.
Web Tasarım Ajansı