Çoğu site artık geliştirilen teknikler ile, ziyaretçilerine daha hızlı sonuç çıktısı vermeyi hedefliyor. Hali ile sayfada önce text olan kısımlar ardından medya kısımları kullanıcıya servis ediliyor. Bu şekilde sunulan sayfalar olandan daha hızlı ve seri olarak çalışıyor.

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.