Bootstrap Carousel ve Lazy Load

Bootstrap altyapısını kullanarak birbirinden güzel şeyler yapılabiliyor. Bunlardan bir tanesi de Carousel. Kocaman, sayfayı kaplayan bir slider olabiliyor bu carousel ya da içerisinde birden çok öğeyi barındıran bildiğimiz carousel de olabiliyor. Aşağıda anlatacağım yöntem ile bu carousel scriptini lazy load ile birleştireceğiz. Örnekte ben bootstrap’ın Carousel örneği olan büyük slider halini kullandım.

Lazy Load bildiğiniz üzere resimlerin yüklenirken beklenmesini önleyen ve onları daha efektif halde kullanabilmemizi, sitenin yükleme hızını arttırmamızı sağlayan bir jQuery eklentisi. Bu eklentiye şuradan ulaşabilir, inceleyebilirsiniz. Kullanımı oldukça basittir, önyükleme yapılacak resimlerin asıl linkleri data-original tanımlaması içine eklenir ve resim yüklenene kadar gösterilecek yer tutucu imaj src tanımlaması içine yerleştirilir. Örnek olarak;

Bu alanda grey.gif 1×1 piksellik bir imajdır. Bunun yerine istediğiniz transparan, yada bu tarzda imajı yerleştirebilirsiniz. Bu durumda Lazy Load çalışma onksiyonu şu olacaktır.

Yukarıdaki kod ile tüm sitedeki resimler etkilenir ve ilgili bütün imajlar lazyload() fonksiyonu ile işlenir. Lazy Load çalışma prensibini ufaktan bir alıntılamam iyi oldu sanırım.

Gelelim asıl konumuz olan Bootstrap Carousel ve Lazy Load işbirliğine. Aslında yapacağımız yukarıda bahsettiklerim gibi, bu bir slider olduğu için statik olarak ilk yüklenen resimler gibi davranmayacaktır. Yani siz lazyload fonksiyonunu bütün resimlere işletirseniz, carousel ikinci resme geçiş yaptığında resim görünmeyecek ve yerinde yer tutucu resim görünecektir.

Bundan kaçınmak için Lazy Load’ın trigger ve event opsiyonlarını kullanacağız. Carousel içinde bulunan ve her resim değiştiğinde tetiklenen slid opsiyonunu da kullanacağız. Yani resim her değiştiğinde lazyload fonksiyonunu işleteceğiz.

Carousel’i lazy load’a uygun hale getirelim.

Lazy Load’ı carousel içerisine ekledikten sonra (data-original ve src alanları) javascript fonksiyonunu ekleyeceğiz. Fonksiyon şöyle oluyor.

Selametle