Peki lazy load mantığı nedir ?
Lazy load mantığı sitenizdeki resim dosyalarının sadece ihtiyaç olduğunda çağrılmasıdır. Mesela bir konunuz var diyelim yüksek kalitede wallpaper paylaştınız. Ziyaretçi konuya girdiği an bütün resimler yüklenmeye başlar.Fakat lazy load ile bütün resimler değil sadece scroll çubuğunuzun olduğu bölümdeki resim yüklenecektir. Scroll aşağı indikçe de resimler gerektiğinde yüklenecektir.
İşte Eklentisiz jQuery Lazy Load Kullanımı
İlk önce ekte verdiğim lazy load dosyasını indirin.Ardından dosyayı açıp içindeki includes ,resim ve js adlı dosyayı temanızın bulunduğu ana klasöre ftp programı yardımıyla atın.
Daha sonra header.php de lazyload.php dosyasını çağıracağız. head tagları içine aşağıdaki kodu yazın.
Burada yapacağımız iş bitti. Bir de includes/lazyload dosyasına bakalım.
Aşağıdaki kodlar lazyload.php dosyasının kodlarıdır burada kendinize göre düzenlemeniz gereken bir yer var. Tozbulutu.org yazan bölümde kendi sitenizin adresini yazın.Burada bir resim yolu belirlemeniz gerekmekte.Resim geç yüklenirse bu resim gösterilecek.
<script>/js/jquery.lazyload.js"></script>
<script>
jQuery(document).ready(function($){
$(".ufakyan img,.konuResim img,.yaziresimleri img,konuAc img").lazyload({
placeholder : "http://tozbulutu.org/wp-content/themes/minimal/resim/grey.gif",
effect : "fadeIn"
});
});
</script>
Burada dikkat etmeniz gereken bir husus daha var.Mesela resminiz index.php de konuresim classının içinde olsun. Siz css dosyasında konuresim img şeklinde biçim tanımlayacaksınız ve aşağıdaki kodda bulunan konuresim img,ufakyan img gibi yerleri kendinize göre düzenleyeceksiniz.
$(".ufakyan img,.konuResim img,.yaziresimleri img,konuAc img").lazyload({
İşlem bu kadar. Hem güzel bir görüntü oluşturduk hem de sistem yükünü hafiflettik.
Örnek olarak blogumun anasayfasını yenileyip yavaşça scroll çubuğunu aşağı indirin.Resimlerin siz aşağıya indirdikçe açıldığını göreceksiniz.
Dosyalar : Buradan
Kaynak ve Demo:Buradan