Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

jQuery İle Lazy Load Kullanarak Image Yükleme

Merhaba,

Her fırsatta bahsettiğim gibi web projelerimizde öncelikli işimiz, kullanıcılara hizmet sağlayabilmek amma bu hizmeti olabildiğince performanslı bir şekilde sağlayabilmektir. Bir web sitesinin işleyişi, hizmeti, sınırları ve özellikleri her ne kadar geniş ve zengin olsada, hız bakımından performanslı olmadığı sürece o proje yarı ölü projedir. İşte bu durumda biz yazılımcılara iki görev düşmekte; birincisi, web projelerinde performansı olumsuz etkileyen faktörleri tespit edebilmek ve ikincisi, bunlara çözüm üretebilmektir.

Bu makalemizde performans aleyhine işleyen birçok faktörden sadece birisi olan web sitemizin içeriğinde yahut herhangi bir yerinde kullanılan resimler üzerinde konuşuyor, odaklanıyor ve çözüm üretiyor olacağız.

Biliyorsunuz ki, girdiğimiz web sitelerinin yavaş yüklenmesinin en mühim kaynaklarından birisi ilgili sitede özellikle büyük boyutlu resimlerin yarattığı yükleme boşluğudur. Bu problem yükleme sırasında oluşturduğu trafikten kaynaklı sitenin yavaş açılmasına ve genellikle kullanıcı kaybına sebep olmakta ve hatta SEO vs. gibi bir sitenin beşeriyetteki derecesinde bile olumsuz etki bırakmaktadır. Haliyle biz yazılımcılar üzerinde çalıştığımız web projelerinin asla ve kat’a bu şekilde bir handikapın eşiğinde olmasını istemeyiz.

Peki ne yapacağız? sorunuzu duyar gibiyim… Bir çok yöntem, düşünce, fikir yahut teknik ortaya koyabiliriz. Şimdi sizlere bunlardan sadece bir tanesini(amma dünyada en çok tercih edileni) sunacağım. Lazy Load yöntemi. Bu yöntem sayesinde web sitemizde bulunan resimlerin hepsini tek çelsede yüklemekten ziyade, ihtiyaç oldukça yükleyecek ve bu işlemi jQuery eşliğinde Client tarafında gerçekleştireceğiz.

Daha da detaylandırmak gerekirse, web sitemizde bulunan resimleri kâh sayfada gördükçe, kâh üzerine tıkladıkça veyahut kâh kendi belirlediğimiz durumlarda yükleyecek, bu şekilde işimiz olmayan resimlerin yüklenmesini beklemeyecek, ee haliyle sitenin açılma süresini uzatmamış olacak, performansı spontane olarak gerektiği yerde kullanmış olacağız.

Şimdi dilerseniz ufak örneklendirmeyle Lazy Load yöntemini pratikleştirelim.
Öncelikle bu yöntem için jquery.lazyload.js dosyasını indiriniz.

İlk yapmamız gereken indirmiş olduğunuz jquery.lazyload.js dosyasını projenize entegre ediniz.

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.lazyload.js"></script>

Ardından resimler üzerinde aşağıdaki çalışmayı genelleyin, gerçekleştirin.

<img class="lazy " alt="Resim Açıklaması" src="{Yükleniyor Resmi}" data-original="{Orjinal Resim}" />

Burada dikkat etmemiz gereken “src” ile “data-original” attributelarıdır.

  • src
    Orjinal resim yüklenene kadar gösterilecek resmi ayarlıyoruz.
  • data-original
    Orjinal resmimizi veriyoruz.

Ve son olarak body tagını kapatmadan önce aşağıdaki jQuery kodlarını yazıyoruz.

    <script type="text/javascript" charset="utf-8">
        $(function () {
            $("img.lazy").lazyload();
        });
    </script>

Bu işlemden sonra sayfanızdaki resimlerin hepsi bodoslama yüklenmeyecek, sayfada gözüktükçe yüklenecektir.

Şimdi aşağıda bütün olarak örnek bir Lazy Load işleminin uygulandığı sayfa paylaşalım ve ardından video ile nasıl sonuç aldığımızı inceleyelim.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.lazyload.js"></script>
</head>
<body>
    <img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0011.jpg" width="500" heigh="500" />
    <br />
    <img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0043.jpg" width="500" heigh="500" />
    <br />
    <img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0043.jpg" width="500" heigh="500" />
    <br />
    <img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0042.jpg" width="500" heigh="500" />
    <br />
    <img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0043.jpg" width="500" heigh="500" />
    <br />
    <img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0043.jpg" width="500" heigh="500" />
    <br />
    <img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0044.jpg" width="500" heigh="500" />
    <br />
    <img class="lazy " alt="Resim Açıklaması" src="/Content/Images/Yukleniyor.gif" data-original="/Content/Images/IMAG0045.jpg" width="500" heigh="500" />

    <script type="text/javascript" charset="utf-8">
        $(function () {
            $("img.lazy").lazyload();
        });
    </script>
</body>
</html>

Gördüldüğü üzere Lazy Load yöntemiyle resimlerimizi tek çelsede değil, sayfada gözükçe yüklemekteyiz.

Bunun dışında Lazy Load yöntemine belli başlı ayarlamalar çekebilmekteyiz. Şimdi gelin bu ayarları inceleyelim.

Resim Eşiğini Ayarlama

Lazy Load yöntemiyle yüklenecek resmin alt limitini ayarlayabilmekte, haliyle performansı kasmayacak derecedeki resimleri anlık olarak önceden yükletebilmekteyiz. Bu işlem için “threshold” propertysini kullanmaktayız. Verilen değer piksel cinsinden değerlendirilmekte ve işlem yapılmaktadır.

    <script type="text/javascript" charset="utf-8">
        $(function () {
            $("img.lazy").lazyload({
                threshold: 200
            });
        });
    </script>

Olay İle Yükleme

Biz makalemizde resimler sayfada görüldüğü anda yüklemeyi gerçekleştirdik. Bunun dışında resimlerin yüklenmesini herhangi bir olaya bağlayabiliriz. Bu işlem için “event” parametresini kullanmamız yeterlidir. “event” özelliği; “click”, “mouseover”, “sporty”, “foobar” vs. değerlerini alabilir.

Örneğin aşağıdaki uygulama ile üzerine tıklanan resim serverdan yüklenecektir.

    <script type="text/javascript" charset="utf-8">
        $(function () {
            $("img.lazy").lazyload({
                event: "click"
            });
        });
    </script>

Efekt Kullanımı

Lazy Load esnasında efekt belirtebiliriz. “effect” özelliği ile “fadeIn” yahut “show” gibi parametrelerle çalışmaktadır.
Aşağıda görüldüğü üzere “click” eventıyla, “fadeIn” efektiyle çalışmasını belirtmiş oluyoruz.

    <script type="text/javascript" charset="utf-8">
        $(function () {
            $("img.lazy").lazyload({
                event: "click",
                effect: "fadeIn"
            });
        });
    </script>

Evet… Görüldüğü üzere Lazy Load yöntemiyle web sitemizdeki resimleri daha performanslı bir şekilde yükleyebilmekte ve hızımıza hız katmaktayız. Bu şekilde büyük bir sorun olan resimleri boyutları önemsemeksizin siteyi kasmadan yükleyebiliyor, kaliteli ve kullanıcı dostu bir site inşa edebiliyoruz.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar dilerim…

Bunlar da hoşunuza gidebilir...

8 Cevaplar

  1. Burak dedi ki:

    Kodları denemedim ama çok faydalı bir içerik. Sanırım artık lazy load kullanarak scrool aşağı indikçe resimleri yüklenir yapabileceğim.

    Teşekkürler.

  2. mehmet günal dedi ki:

    iosta çalışmıyor nasıl çözebiliriz, safaride çalışmıyor.

  3. Ahmet dedi ki:

    Üstad paylaşım için teşekkürler ilk olarak burada paylamış olduğun lazy.js dosyasını indirdim slider’de yatayda resimler yüklenmedi vs. daha sonra lazy.js nin yeni versiyonunu indirip güncelledim tüm buglar ortadan kalktı. sorun yaşayan arkadaşlar olursa lazy.js nin yeni versiyonu nu kullanabilirler.

    • Gençay dedi ki:

      Merhaba Ahmet,

      Öncelikle çaban ve çözüm neticesinde dönüp bizi bilgilendirmen için çok teşekkür eder ve içerikten faydalandıysan ne mutlu olduğumu bilmeni isterim…
      Kolay gelsin.

      • Ahmet dedi ki:

        Çok faydalandım üstad, hatta aramalara bazı konularda direk sonuna gencayyildiz ekliyorum önce senin o konuyla ilgili paylaşımın olup olmadığına bakıyorum. Teşekkür ederim paylaşımın için.

  4. gülsüm dedi ki:

    Ahmet arkadaşın dediği gibi bende yeni bir konuya bakacaksam ilk ziyaret ettiğim sayfalardandır. Teşekkür ederiz emekleriniz için.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*