Aynı zamanda katılan efektler ile pekiştirilmesi de daha hoş bir çıktıyı servis etmiş oluyor. Bu gün sizlerinde farkettiği üzere, bir çok haber sitesi en başta olmak üzere, ana sayfasında fazlası ile resim ve medya içeriği olan sitelerrdeki resimlerin scrool bar çekildikçe yüklenmesini sağlayan uygulamayı Nick Jhonas tarafından geliştirilen küçük bir Jquery plugin olan imageloader.js ile yapacağımızdan bahsedeceğim.
imageloader.js ile resimlerinize preloader efekti ekleyin
Kullanımı oldukça basit olan bu eklenti de, oluşturacağınız ek fonksiyonlar ile de daha yaratıcı yapılara imza atabilirsiniz. Kullanımı konusunda örnek vermek gerekirse (daha detaylı döküman için gitHub proje sayfası na bakabilirsiniz.) ; öncelikle jquery'nin son sürüm kütüphanesini sayfanıza dahil edip, ekteki plugin dosyasınıda çağırdıktan sonra, yapılandırma kodlarınızı da sayfanıza dahil etmelisiniz. Ayrıca yapılandırma kodları arasında, resimlerinizi tek satıra bastırmanız da gerekiyor. Şu şekilde,
$(document).ready(function(){
$.imageloader({
urls: ['images/0.jpg', 'images/1.jpg', 'images/2.jpg', 'images/3.jpg'],
onComplete: function(images){
// Resimler yüklendiğinde yapılacak eylemi burada tanımlayabilirsiniz.
},
onUpdate: function(ratio, image){
// ratio: varsayılan resim yüklendiğinde belirecek ratio değeri.
// image: resim yüklendiği url adresi.
},
onError: function(err){
// err: eğer resimler yüklenemez ise gösterilecek mesaj.
}
});
});
İşte hepsi bu kadar basit. Tek yapmanız gereken, urls parametre değeri içine resimlerinizi yazdırmak. Güle güle kullanın.
İndir - Demo
Bu yazı www.fatihtoprak.com adresinden alınmıştır.
