LazyLoad ve Masonry birleştirme

Bir web sitesinde, logo, ürün fotoğrafları, kampanyalar gibi bir çok görsel bulunabilir. Ancak görsellerin boyutları çok büyük ve yüksek çözünürlükte olduğunda web site hızınızı yavaşlatabilirler. Bu durumda görsellerden kurtulmak yada küçülterek kalitesini düşürmek yerine, lazy load kullanarak web sayfalarınızın hızlı yüklenmesini sağlayabilirsiniz.

Lazy Load Nedir?
Görüntülerin web sitelerinde eş zamansız olarak yüklenmesidir. Yani ekranın üst kısmındaki içerik tamamen yüklenirken, diğer görsellerin tarayıcı da gördükleri zaman yüklenmesi anlamına gelir.

Lazy load kullanarak ekranda olmayan görsellerin yüklenmesini ertelenir ve sitenin daha hızlı açılmasını sağlanır. Böylece görünüm alanında olmayan görseller ilk sayfa yükleme performansını etkilemez.

Tabi bu yazımdaki konu aslında bunu zaten bilen ve kullanan arkadaşların karşılaştığı bir sorun ile alaklı. Ben yinede bilmeyenler için kısa bir bilgi vermek istedim 🙂

Lazy Load ve Jquery Masonry birleştirme / Birlikte kullanma.

jQuery masonry eklentisi yardımıyla paylaşımlarınızı çok görsel biçimde sunabilirsiniz ziyaretçilerinize, eklentiye parametre olarak geçtiğiniz paylaşımlarınızı (farklı boyutlardaki görselleri, geniş dar kutular vs.) yan yana ve devamında alttan devam edecek şekilde boşluklarıda doldurabilen bir tasarım oluşturmaktadır.

Lazy Load kullandığınızda, site yüklendiği sırada sitenin alt tarafındaki görseller inmediği (beklemede olduğu) için kullandığınız jquery masonry eklentiside görsellerin boyutlarını tahmin edemiyor ve doğru çalışmıyor. Bu durumda istediğiniz görüntüyü yakalayamıyorsunuz..

Lazy Load ve Jquery Masonry eklentisni birlikte kullanabilmeniz mümkün.

Sayfanıza (Lazy Load için) jquery.lazyload.min.js ve (Jquery Masonry için) masonry.pkgd.js kütüphanelerini eklediğinizi varsayıyoruz. birlikte kullanabilmek için < script > … < / script > tanımlasını ayrı ayrı değil birlikte kullanacağız. Aşağıdaki kod sayesinde ilk LazyLoad eklentisi ile resimler yükleniyor ve sonrasında JqueryMasonry görevini yapıyor ve istediğiniz görünümü sağlamış oluyorsunuz.

<script>

jQuery(document).ready(function(){
jQuery('img.lazy').lazyload({
***resimler için verdiğimiz class .lazy***
effect: 'fadeIn',
effectspeed: 1000,
threshold: 200,
load:function(){
var $container = jQuery('.arsiv-masonry-list');
***listenin bulunduğu kutu .arsiv-masonry-list***
$container.masonry({
}).imagesLoaded( function () { $container.masonry(); });

}
});

});

</script>