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;

<img data-original="asil-resimin-adresini-icerir.jpg" src="grey.gif" />

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.

$(document).ready(function(){
$('img').lazyload();
});

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.

    <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="item active">
          <img data-original="slide-01.jpg" src="grey.gif" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Sign up today</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img data-original="slide-02.jpg" src="grey.gif" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Learn more</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img data-original="slide-03.jpg" src="grey.gif" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>

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

  $(document).ready(function(){
   $('#myCarousel').carousel(
    {
     interval:5000
    }
   ); // Carousel calıştırma kodu 5 saniyelik döngü atadık.
   
   $('#myCarousel').bind('slid', function() {
    $('.item img').trigger('slided'); //carousel resim değiştirdiğinde slided eventini tetikleyelim
   });
   $('.item img').lazyload(
    {
     threshold : 20,
     event:'slided',
     effect:'fadeIn' //Fazladan verilmiş efekt. değişimi görün diye. kaldırabilirsiniz.
    }
   );
  });

Selametle