Lazy loading with Waypoints

Hello,

In this post I’m going to explain how to load page content as client need it. In other words, how to load content when scroll to it vertically. We call it Lazy loading.

First thing you have to do is including Waypoints files in your project.

You can load required Waypoint.min.js from the Cloudflare CDN as well.

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" type="text/javascript">

Next step is defining a Waypoint object.

 var waypoint = new Waypoint({
        element: document.getElementById('images'),
        handler: function () {
            //perform your loading action here.
        }
    });

You can also use offset property to manipulate scroll offsets.

 var waypoint = new Waypoint({
        element: document.getElementById('sectActual'),
        handler: function () {
           //perform your loading action here.
        },
        offset: 450
    });

You can also have a look into ASP.NET MVC – Loading Content Asynchronously post. I have demonstrated how to load images asynchronously in an ASP.NET MVC application.

Fazlasını Oku

ASP.NET MVC – Asenkron İçerik Yükleme

ASP.NET MVC – Loading Content Asynchronously yazısının Türkçe versiyonudur.
This post is written in Turkish. English version: ASP.NET MVC – Loading Content Asynchronously

Merhaba arkadaşlar. Bu yazıda sayfa yüklenmesini geciktiren içerikleri asenkron olarak nasıl yükleyebileceğimizi anlatmaya çalışacağım.

Büyük resimler veya yüksek miktardaki metinler sayfa yüklenmesinde bazı gecikmelere sebep açabilir. Asenkron yükleme tekniğiyle bu içeriklerin sayfanın yüklenmesini bloklamadan yüklenmesini sağlayabiliriz.

Neden?

Bu yazıyı yazmamdaki sebep kullanıcılarınıza nasıl daha iyi bir kullanıcı deneyimi sunabileceğiniz göstermektir. Kullanıcı deneyiminin yanı sıra, büyük miktardaki verileri asenkron olarak yüklemek sayfa hızınızı da önemli ölçüde etkileyecektir. Senkron yüklemelerde büyük miktardaki veriler sayfa yüklenmesinde bazı gecikmelere yol açabilir ve UX açısından sakıncalıdır.

Senaryo
Bu yazıda kullanılacak senaryoda birkaç resim yükleyen basit bir HTML sayfasını inceleyeceğiz.

Kullanılanlar:
-ASP.NET MVC
-Twitter Bootstrap (zorunlu değil)
-jQuery

Öncelikle birkaç görseli sayfada senkron olarak yükleyeceğiz ve daha sonra farkı görmek adına bunları asenkron olarak yükleyeceğiz. Asenkron yükleme işlemini Ajax çağrıları yaparak gerçekleştireceğiz. Görsellerin kaynaklarını (src) sayfa yüklendikten sonra atayarak sayfadaki gecikmelerin önüne geçmiş olacağız.

Senaryo sonda böyle gözükecek.

 

Senkron Yükleme

Önce daha kötü olan senaryoyu inceleyelim. Görselleri senkron yükleyeceğimiz ‘SyncPage’ sayfası için HomeController altında bir Action oluşturalım.

Bu metodda, Boğaziçi Köprüsü’ne ait 4 fotoğrafın linklerini ekleyip model olarak döndüreceğiz.

View kısmında ise bir paneli her bir fotoğraf için kolonlara bölüyoruz.

Bu görselleri yüklemenin olağan yolu. Henüz özel birşey yok. Lakin büyük boyuttaki görseller yüklerken senkron yükleme sayfada gecikmelere yol açacaktır. HTTP Request, resimler tam olarak kaynaktan alınana kadar sonuçlanmayacaktır.

Asenkron Yükleme

Bu bölüm güzel işler yapacağımız  kısım. HomeController’a yeni bir Aksiyon ekleyerek başlayacağız. Bu aksiyon, asenkron yükleme için kullanacağımız method olacaktır. AsyncPage ismindeki Action’umuzu oluşturalım.

 

 

AsyncPage ismindeki aksiyonu oluşturmadan önce bir şeye değinmek isterim. Daha önce görselleri Ajax istekleri ile yükleyeceğimizden bahsetmiştim.

O halde verilerimizi JSON formatta sunmalıyız. Bunun için sayfanın Action’undan farklı olarak, öncelikle JSON formatta görsellerin kaynaklarını döndüren bir method yazalım. Bu metodun ismi ise GetImageData() olsun.

GetImageData() metodu:

Bu metodda, görsel verilerini JSON formatta döndürdük.

Şimdi AsyncPage sayfamız için Action oluşturalım.

Lütfen dikkat edin, bir model döndürmedik.

Bir model döndürmedik çünkü bu senaryoda bir modele ihtiyacımız yok. Yukarıda bahsettiğim gibi, görselleri ‘/Home/GetImageData’ yoluna Ajax istekleri yaparak yükleyeceğiz.

Şimdi AsyncPage sayfamızın View’ını oluşturalım.

Bu sayfada da, bir satırı 4 kolona böldük. Farklı olarak, her bir görseli ‘Id’ etiketiyle etiketledik. Bu etiketlere JSON formatındaki veriyi manipüle edebilmek için ihtiyacımız olacak.

Bu sayfanın JS kısmında ise görselleri JSON formatta yükleyip, görsellerin kaynak özelliklerine (src) atama yapıyoruz.

‘/Home/GetImageData’ yoluna bir Ajax isteği yaptık ve her bir resmin kaynaklarını güncelledik. Dikkat edeceğiniz üzere her bir resmin ‘Id’ etiketini burada kullandık.

Böylece asenkron yüklemeyi tamamlamış olduk, böylece sayfadaki görsellerden kaynaklanan gecikmeyi engellemiş olacağız.

İki senaryo arasındaki farkı aşağıda görebilirsiniz.

Senkron yükleme:

 

Asenkron yükleme:

Senkron yüklemede, HTTP Request’i görseller kaynaktan yüklenene kadar sonuçlanmıyor. Bu da sayfanın yüklenmesinde gecikmeye yol açıyor.

Asenkron yüklemede ise, görselleri arkaplanda asenkron olarak yüklediğimiz için sayfadaki gecikmeleri engellemiş oluyoruz.

Kaynak koda Github‘dan erişebilirsiniz.

 

Fazlasını Oku

Yeni Proje : İndirim Kuponu

Yer aldığım yeni proje nu bitirdik. Kasım 2016’da altyapısına başladığımız proje Ağustos 2017 itibari ile bitti.

indirimkuponu.com.tr adresinde yayına aldığımız projede, alışveriş sitelerinde geçerli İndirim Kuponu kodlarına tek yerden erişim imkanı sağlayarak tasarrufa imkan sağlıyoruz.

Nasıl Yapıyoruz?

Alışveriş siteleri, satışlarını optimize etmek için çeşitli indirim ve hediye kampanyaları düzenliyor. Biz de aracı şirketler aracılığıyla alışveriş sitelerinin indirim kuponlarına ve kampanyalarına web sitemizde yer veriyoruz.

Neden Yapıyoruz?

İndirim Kuponu’nu açmaya karar verdik çünkü üssel olarak büyüyen bir pazarda kullanıcıların ihtiyaçlarına düzgün bir şekilde cevap verecek bir altyapı sunmak istedik.

Alışveriş sitelerindeki bu kampanyalar sayesinde ciddi miktarlarda tasarruf sağlamak mümkün.

Neler var?

Hepsiburada, Boyner, Teknosa, Defacto… Türkiye’de hizmet veren aklınıza gelebilecek tüm alışveriş sitelerine ait indirim kuponu ve kampanyalara İndirim Kuponu’nda yer verdik. Giyimden elektroniğe, kozmetikten aksesuara kadar birçok kategoride binlerce indirim kuponundan web sitemiz aracılığıyla faydalanarak ayda yüzlerce lira tasarruf etmeniz mümkün.

Teknik altyapı

Projede ASP.NET MVC altyapısı ve Microsoft SQL veritabanı kullandık. Göz bebeğimiz olan Entity Framework Code First kullanarak zamandan ve emekten kazandık diyebiliriz. Tüm sayfalar HTML5 ile hazırlanmış ve mobil dostudur.

İndirim Kuponu’nu kodlarken nesne tabanlı programlama ilkelerine sadık kaldık. Bunun yanı sıra, Singleton, Abstract Factory, Repository Pattern gibi desenleri de kullanarak güzel bir altyapı sağladık.

https://indirimkuponu.com.tr adresinden İndirim Kuponu projesini inceleyebilirsiniz.

Fazlasını Oku