ASP.NET ortamında Jquery, Ajax ve JSON ile sayfada yüklenen resimlere resim yükleniyor efekti vermek

Daha önce resim galerisini ASP.NET ve Ajax ile nasıl yapıldığını yazmıştım. Fakat resmin tamamen yüklenmesini beklemeden gösteriyordu. Bu yazımda biraz daha farklı bir uygulama yazacağım. 3'er hücreden oluşan 3 satırlı bir tablo düşünün. Her hücrenin içinde bir tane katman ve resim olsun. Bu şekliyle sayfadaki resimler tam yüklenmeden gösterilecek. Bunun yerine resimler yüklene kadar arka planda animasyonlu bir gif image olsun (aşağıdaki gibi). Resim yüklendikten sonra da resim hücrede gösterilsin. loader Yapacağımız uygulamanın bitmiş hali:

ASP.NET-Jquery-yüklenen-resimlere-resim-yükleniyor-efekti-vermek

İsterseniz ASP.NET-Jquery-ajax-json-yüklenen-resimlere-resim-yükleniyor-efekti-vermek linkinden çalışır haline de bakabilirsiniz.

Ajax ile resim yükleniyor efekti vermek için sunucu tarafinda kullanacağımız yöntem:

Yapacağımız uygulamanın kullanıcı taraflı programlamasını Jquery ile yapacağız. Resimlerin özniletik bilgilerini Jquery ile sunucudan JSON isteğinde bulunarak yapacağız. Aldığımız bilgiler img elementinin "alt", "src" ve "title" özniteliklerini içerecek. Tablomuzda toplam 9 hücre ve 9 resim olacağından sunucuda tarafında buna uygun bir JSON verisi yaratacağız. Bir img elementi için isteyeceğimiz JSON verisi şu şekilde olacak : {"title":"Güneş","description":"manzara","url":"1.jpg"} Bu veriyi sunucu tarafında yaratmamız gerekiyor. Bunun için ASP.NET JavaScriptSerializer sınıfından yararlanacağız. Bu sınıf .NET objelerini JSON verisine dönüştürebiliyor. Daha düşük hata olasığıyla JSON verisini yaratmak için verimizi temsil edecek bir class oluşturacağız. Class'ın veri alanları "title", "description" ve "url" olsun. Projemize New Item olarak C# dilini seçip Web Form ekleyelim. .cs dosyasına JSON verisinine dönüştürülecek objenin klasını yaratalım.
class jsonimage {

   public string title { get; set; }
   public string description { get; set; }
   public string url { get; set; }

    public jsonimage(string title, string description, string url)

    {
        this.title = title;
        this.description = description;
        this.url = url;
    }
    public jsonimage() { }
}   
Şimdi de kullanıcıdan JSON isteği halinde cevap verecek kodumuzu yazalım. ( System.Web.Script.Serialization ve System.Collections.Generic isim uzaylarını .cs dosyamıza eklemeyi unutmayalım.)
    protected void Page_Load(object sender, EventArgs e)
    {
        //json istegi olup olmadığını kontrol et
        if (Request.QueryString["json"] == "true")
        {
            jsonimage json;
            //Json datamızı oluşturacak classımız
            JavaScriptSerializer ser = new JavaScriptSerializer();

            // birden fazla data objemızı json'a çevirmek için objeleri liste halinde 
            // teker teker yaratıp listeye ekliyoruz.
            // json objemizi temsil edecek jsonimage tipi List'yi oluşturuyoruz
            
            List<jsonimage> im = new List<jsonimage>();

            json = new jsonimage("Güneş", "manzara", "1.jpg");
            im.Add(json);
            json = new jsonimage("dere", "yeşillik", "2.jpg");
            im.Add(json);
            json = new jsonimage("kaya", "manzara", "3.jpg");
            im.Add(json);
            json = new jsonimage("deniz", "manzara", "4.jpg");
            im.Add(json);
            json = new jsonimage("orman", "yeşillik", "5.jpg");
            im.Add(json);
            json = new jsonimage("çiçek 1", "yeşillik", "6.jpg");
            im.Add(json);
            json = new jsonimage("çiçek 2", "yeşillik", "7.jpg");
            im.Add(json);
            json = new jsonimage("çiçek 3", "yeşillik", "8.jpg");
            im.Add(json);
            json = new jsonimage("kaplumbağa", "deniz", "9.jpg");
            im.Add(json);

            // browser'a içerik bilgisini yolluyoruz
            // Response.ContentType = "application/JSON";
            // browsera json datamızı elde edip yolluyoruz
            Response.Write(ser.Serialize(im));
            //browser'a cevabın bittiğini söylüyoruz
            Response.End();
            
        }
    }

Bu haliyle internet tarayıcımızda çıktıyı görelim. Fakat JSON datasını görmek için adres satırın sonuna "?json=true" ekleyelim.

adres

Kullanıcı (istemci) tarafında resim yükleniyor efekti vermek için:

Sunucu tarafındaki kodumuzu yazdıktan sonra kullanıcı tarafına geçelim. Kullanıcı tarafında yazacağımız javascript kodunun daha az yazmak için Jquery kullanacağız. Jquery ile şu işlemleri yapacağız:
  • Bir tane button koyup veriyi alacak fonksiyonu button'un click olayına bağlayacağız.
  • jQuery.getJSON( url, data, callback ) metodu ile imageGalery.aspx?json=true adresinden JSON verisi isteğinde bulunacağız
  • Gelen JSON verisini alt dizilere ayıran $.each( ) fonksiyonu ile her resmin "url", "Description" ve "title" bilginis alacağız
  • JSON ile img elementini yaratıp url, title ve alt özelliklerini gelen veriye göre ayaralayıp tablo hücrelerine teker teker yerleştireğiz
Tüm bu işlemleri yapacak Jquery kodumuzu ve .aspx sayfamazın yazalım. Gösterilecek resim sayısının 9 adet olduğunu hatırlatayım. Jquery kodumuz :
$(document).ready(function(){

    //tabloyu ilk başta göstermiyoruz
    $('#tablo').hide();

    $("#getir").click(function(){

      $('#tablo').show();

     $.getJSON("imageGalery.aspx",{json:true},
     function(data){
      //her json verisi için fonksiyonu çağırıyoruz
       $.each(data, function(i,item){            
          // her json verisi için img elemtini yaratıyor 
		  // ve özelliklerini giriyoruz.
          // burada dikkat etmemiz gereken resim tam yüklenene 
		  // kadar img elementini eklemiyoruz.
          // bu yüzden resim yüklendikten sonra yapılacak
		  // işi sonraki fonksiyonda ayrıca belirtiyoruz.
          var a=$("<img>").attr( "src", item.url).attr( 
		  "title", item.title).attr("alt",item.description).load(
          // img elementini burada ekliyoruz
           function () {
            // eklememiz gereken div elementini bulup önce 
			// boşaltıyor sonra img elementini ekliyoruz.  
            // gosterilecek resim sayısı part klasını
			// kullanan div elementi sayısını geçmemeli
            if ( i < $('.part').size())
             $(".part:eq("+i+")").empty().append(a);    
            });//.each
        });//callback fonksiyonu 

    });//getJSON 

  });//click fonksiyonu

});//document ready
  
Ve son kısım: body kısmı:
<form name="form1" method="post" action="imageGalery.aspx" id="form1">

    <div>
        <input id="getir" type="button" value="button" />

        <table id="tablo"  >
            <tr>

                <td>
                      <div class="part"   ></div>
                </td>
                <td>
                       <div class="part"   ></div>
                </td>
                <td>
                     <div class="part"   ></div>
                </td>

            </tr>
            <tr>
                <td>
                      <div class="part"   ></div>
                </td>
                <td>
                       <div class="part"   ></div>
                </td>
                <td> 
                      <div class="part"   ></div>

                </td>
            </tr>
            <tr>
                <td>
                       <div class="part"   ></div>
                </td>
                <td>
                       <div class="part"   ></div>
                </td>

                <td>
                     <div class="part"   ></div>
                </td>
            </tr>
        </table>
        
    </div>
</form>

Jquery ve Ajax ile ASP.NET ortamında resim yükleniyor efekti JSON verisi kullanarak yaptık. Siz isterseniz XML kullanabilirsiniz. JSON şart değil tabii. Fakat JSON kullanımı açısından daha rahat olduğu kesin. Uygulama ile ilgili dosyaları linkinden indirebilirsiniz.
yazan Zülküf Küçüközer tarih   1st September 2009
primary key words  Json | Jquery | Resim | Ajax okunma  25514
secondary key words  Asp.net | Yükleniyor | Javascript
writing ?hlas Temizlik Robotu writing 18th April 2011
Teşekkürler Gayet açıklayıcı olmuş
writing aLi writing 6th December 2011
değerli paylaşım için teşekkürler..
writing bahad?r writing 30th April 2012
merhaba veritabanından resim çekmek istiyorum bir türlü beceremedim.format uymuyo sanırım nasıl halledebilirim ?
writing ali writing 25th January 2013
cok güzel olmus
writing ihlas Temizlik Robotu writing 25th August 2013
Gayet basarili bir çalisma Tesekkürler.