Can KAYA

Merhaba arkadaşlar,

Bu yazıda jqueryde PreventError() ve return false deyimlerinin farkından bahsedeceğim.

aslında aradaki fark çok basit. preventError() fonksiyonu var olan bloktaki işlemin bittiğini belirtiyor.

return false; komutu ise artık javascript ile ilgili bir işlem yapmaya gerek kalmadığı geri dönebileceğini belirtiyor. Burada tabi sizin anlama kabiliyetiniz kadar benim de anlatma kabiliyetimin kalitesi ortaya çıkıyor:)

Anlaşılmadığımı düşünüyorum ve açıklamaya başlıyorum:

http://css-tricks.com/examples/ReturnFalse/

yukarıdaki linkteki örnekte return false ile tüm işlem durdurulurken (bir sonraki fonksiyona gecmesine izin verilmez) preventdefault ile o bloktaki işlem bitiyor ancak diğer fonksiyona geciyor.

$(function() {

  $("#page-wrap div").click(function() {
  
    $(this).css("background", "red");
  
  });
  
  $("#box-one .inside").click(function(e) {
  
    $(this).css("background", "green");
    e.preventDefault();
  
  });
  
  $("#box-two .inside").click(function() {
  
    $(this).css("background", "green");
    return false;
  
  });

});

Tags:

Merhaba arkadaşlar bu yazıda benim için hayati bir önem tasıyan javascript dosyasından bahsetmek istiyorum. Geliştirdiğim bir sosyal medya sitesinde işlemleri ajax ile json veri tipinde alıp asenron işlemlerde trafiği azaltmayı planlamıştım. Nitekim düşündüğümü de gerçekleştirdim. Çalışma hızı ve koda hakimiyet anlamında beni tatmin de etmişti bu yöntem.

taaki bir geri bildirimde asenkron çalışması gereken yerlerin çalışmadığı bildirildi. Bu bildirim mesai bitişime yarım saat kala geldi. başladım araştırmaya. bu yarım saat içinde problemin analizi nedeni ve nasıl çözüleceğini bulamazsam. zor bir gece beni bekliyordu. Düşünsenize herseyin asenkron olduğu bir sitede asenkton veri iletimi gerçekleşemiyordu.

Kronolojik olarak problemi tanımlama da problemin sadece ie 6 browserda json nesnesini desteklemediği için olduğunu tesbit ettim. Bununla ilgili bir google resultsetinde ie 6 için bir javascripti import etmenin yeterli olacağını belirtiyordu. ilk başta inanamıştım. javascript dosyasını indirip incelediğimde yazmam gereken bütün tanımlamaların olduğu gördüm. Daha fazla düşünmeden javascripti import edip deneme yaptım. Ve Sonuç ariel beyazlığı :)) gayet başarılı bir şekilde çalıştı.

Sizin için ufak ama vazgecilemez olan javascript dosyası aşağıda.

https://github.com/douglascrockford/JSON-js/blob/master/json2.js

Tags: ie6, json, ie6 json is not defined

FluentValidation adından da anlaşılacağı gibi bir validation çözümüdür. Open source olan geliştirildiği söylenen ancak benim henüz kaynak kodlarına erişemediğim sadece elimde bir dll i olan bir proje. Eğer kullandığınız classınızın çok fazla properytsi varsa bunları yönetmekte zorluk cekiyorsanız tam size göre bir çözüm. Bu cümlede TVlerde sabaha karsı satılan ürünlerin reklamları gibi oldu. Yarım saat içinde ararsanız buda bedava.....:) herneyse konuyu dağıtmadan Temel anlamda sizin propertylerinizin valuelerini kontrol eden bir mimari.

Kullanımı çok basit ve sadece kendisinden beklenei yerine getiriyor. Projeye buradan erişebilirsiniz. 

Basit bir sınıf tasarlayalım.

public class Users
    {
        public int UserId { get; set; }
        public string NameSurname { get; set; }
        public string UserName { get; set; }
        public string Password { get; set; }
    }

Şimdi validate için bir sınıf yazalım.

    public class UserValidator:FluentValidation.AbstractValidator<Users>
    {
        public UserValidator()
        {
            RuleFor(user => user.UserName).NotNull().NotEqual("admin").Length(1,100);
            RuleFor(user => user.UserId).NotEmpty().NotNull().GreaterThan(1);
        }
    }

Kullanımı ise:

Users _user = new Users();
            _user.UserName = "admin";
            UserValidator _validator = new UserValidator();
            ValidationResult result = _validator.Validate(_user);
            if (result.IsValid)
            {
                //hersey yolunda
            }
            else
            {
                foreach (var failure in result.Errors)
                {
                    Console.WriteLine(failure.PropertyName + " failure");
                    Console.ReadLine();
                }
            }

Projenin dökümantasyonunda sizi tatmin edecek metotlar var. Regular expression için Matches() metodu, Çok kullanılan email kontrolu için ise hazır bir Email validatoru var. Bu metodun finans sektörü gibi çok fazla propertysi olan sektörlerde hayat kurtarıcı bir özelliğe sahip olacağını düşünüyorum. Projeyi modulerleştirmek ve validation işlemlerini belki bir katmana atamak isterseniz de WithMessage("mesaj") kullanılarak gerekli response verilebilir. Bu sayede gelen cevabı kontrol etmeye gerek kalmaz, araya business katmanının girmemiş olur.

Tags: Fluentvalidation

Merhaba arkadaşlar, bu makalemizde sanal pos nedir, kimler kullanır, güvenliği nasıl sağlanır gibi sorulara yanıt vermeye çalışacağız. Sanal pos genel tabiriyle bizim günlük hayatta alışverişlerde kullandığımız pos makinesinden bir farkı yoktur. Arada tek bir fark vardır, O da ortada gözle görülen bir makinenin olmamasıdır.

Pos makinalarından kartımızı geçirdiğimizde, kartımızın üzerindeki bilgiler okunur ve sunucuya gönderir. Sunucudan gelen cevaba göre bize slip diye tabir edilen bir kâğıt verilir işlem tamamlanmış olur.

Sanal pos işleminde ise ortada bir makina olmadığına göre kartımızın üzerindeki bilgileri bizim girmemiz gerekecektir. Bu bilgileri girerken de insan ister istemez kuşkuya düşer. Nereye gidiyor bu bilgiler ya birileri bu bilgilerimi alırsa gibi? Bunun içinde kredi kartı bilgilerinizi girdiğiniz sitelerde SSL adı verilen güvenlik sisteminin çalışıp çalışmadığına dikkat etmelisiniz.

Sanal posu kimlerin kullandığına gelince internetten satış yapmak isteyen firmalar gerekli web yazılımını(web sitesi) hazırladıktan sonra bankanın istediği bir takım istekleri de yerine getiren herkes kullanabilir.

Günümüzde  eticaret uygulamalarında büyük firmalar genellikle kendi sanal posunu kullanmaktadır. Küçük işletmeler ise paypal yâda gittigidiyor gibi siteler üzerinden belirli bir yüzde vererek ürünlerini satabilmektedir.

Bu makalede Garanti bankası sanal posunun nasıl entegre edileceğini göreceğiz.

GarantiBank isimli classımın propertyleri:

public string strMode { get; set; }//TEST - PROD
        public string strVersion { get { return "v0.00"; } }
        public string strTerminalID { get { return "***"; } }//Terminal numarasi
        public string _strTerminalID { get { return "***"; } }//Terminal numarasi Başına 0 eklenerek 9 digite tamamlanmalıdır. 
        public string strProvUserID { get { return "PROVAUT"; } }
        public string strProvisionPassword { get { return "***"; } }//Terminal UserID şifresi 
        public string strUserID { get { return "PROVAUT"; } }
        public string strMerchantID { get { return "***"; } }//Üye İşyeri Numarası 
        public string strCustomerName { get; set; }//kart üzerindeki ad soyad
        public string strIPAddress { get; set; }//işlem yapan kullanıcının ip adresi
        public string strEmailAddress { get; set; }//işlem yapan kullanıcının email adresi
        public string strOrderID { get; set; }//sistemde kullandıgınız siparis id
        public string strNumber { get; set; }//kredikart üzerindeki no
        public string strExpireDate { get; set; }//son kullanma tarihi 0112 gibi
        public string strCVV2 { get; set; }// 3 yada 4 hane kartın arkasındaki cvv numarasi
        public string strAmount { get; set; }//cekilecek tutar 1250 gibi yada 100 gibi
        public string strType { get { return "sales"; } }
        public string strCurrencyCode { get { return "949"; } } // tl işlem kodu
        public string strCardholderPresentCode { get { return "0"; } }
        public string strMotoInd { get { return "N"; } }
        public string strHostAddress { get { return "https://sanalposprov.garanti.com.tr/VPServlet"; } }
        public string SecurityData { get { return GetSHA1(strProvisionPassword + _strTerminalID).ToUpper(); } }
        public string HashData { get { return GetSHA1(strOrderID + strTerminalID + strNumber + strAmount + SecurityData).ToUpper(); } }
        public string HataIletisi { get; set; }
        public string ConfirmRefNo { get; set; }

Hash Olusturmak için gerekli olan birkaç metot: Yine garantibank classının içerisinde

public string GetHexaDecimal(byte[] bytes)
        {
            StringBuilder s = new StringBuilder();
            int length = bytes.Length;
            for (int n = 0; n <= length - 1; n++)
            {
                s.Append(String.Format("{0,2:x}", bytes[n]).Replace(" ", "0"));
            }
            return s.ToString();
        }
        public string GetSHA1(string SHA1Data)
        {
            SHA1 sha = new SHA1CryptoServiceProvider();
            string HashedPassword = SHA1Data;
            byte[] hashbytes = Encoding.GetEncoding("ISO-8859-9").GetBytes(HashedPassword);
            byte[] inputbytes = sha.ComputeHash(hashbytes);
            return GetHexaDecimal(inputbytes);
        }

Bankanın sizden beklediği xmli olusturma ve cevabı okuma işlemini aşağıdaki kod bloguyla gercekleştirebilirsiniz.

public string GenerateXmlDocument()
        {
            System.Xml.XmlDocument doc = new System.Xml.XmlDocument();
            System.Xml.XmlDeclaration dec = null;
            dec = doc.CreateXmlDeclaration("1.0", "ISO-8859-1", "yes");
            doc.AppendChild(dec);

            System.Xml.XmlElement GVPSRequest = null;
            GVPSRequest = doc.CreateElement("GVPSRequest");
            doc.AppendChild(GVPSRequest);

            System.Xml.XmlElement Mode = null;
            Mode = doc.CreateElement("Mode");
            Mode.AppendChild(doc.CreateTextNode(strMode));
            GVPSRequest.AppendChild(Mode);

            System.Xml.XmlElement Version = null;
            Version = doc.CreateElement("Version");
            Version.AppendChild(doc.CreateTextNode(strVersion));
            GVPSRequest.AppendChild(Version);

            System.Xml.XmlElement Terminal = null;
            Terminal = doc.CreateElement("Terminal");
            GVPSRequest.AppendChild(Terminal);

            System.Xml.XmlElement ProvUserID = null;
            ProvUserID = doc.CreateElement("ProvUserID");
            ProvUserID.AppendChild(doc.CreateTextNode(strProvUserID));
            Terminal.AppendChild(ProvUserID);

            System.Xml.XmlElement HashData_ = null;
            HashData_ = doc.CreateElement("HashData");
            HashData_.AppendChild(doc.CreateTextNode(HashData));
            Terminal.AppendChild(HashData_);

            System.Xml.XmlElement UserID = null;
            UserID = doc.CreateElement("UserID");
            UserID.AppendChild(doc.CreateTextNode(strUserID));
            Terminal.AppendChild(UserID);

            System.Xml.XmlElement ID = null;
            ID = doc.CreateElement("ID");
            ID.AppendChild(doc.CreateTextNode(strTerminalID));
            Terminal.AppendChild(ID);

            System.Xml.XmlElement MerchantID = null;
            MerchantID = doc.CreateElement("MerchantID");
            MerchantID.AppendChild(doc.CreateTextNode(strMerchantID));
            Terminal.AppendChild(MerchantID);

            System.Xml.XmlElement Customer = null;
            Customer = doc.CreateElement("Customer");
            GVPSRequest.AppendChild(Customer);

            System.Xml.XmlElement IPAddress = null;
            IPAddress = doc.CreateElement("IPAddress");
            IPAddress.AppendChild(doc.CreateTextNode(strIPAddress));
            Customer.AppendChild(IPAddress);

            System.Xml.XmlElement EmailAddress = null;
            EmailAddress = doc.CreateElement("EmailAddress");
            EmailAddress.AppendChild(doc.CreateTextNode(strEmailAddress));
            Customer.AppendChild(EmailAddress);

            System.Xml.XmlElement Card = null;
            Card = doc.CreateElement("Card");
            GVPSRequest.AppendChild(Card);

            System.Xml.XmlElement Number = null;
            Number = doc.CreateElement("Number");
            Number.AppendChild(doc.CreateTextNode(strNumber));
            Card.AppendChild(Number);

            System.Xml.XmlElement ExpireDate = null;
            ExpireDate = doc.CreateElement("ExpireDate");
            ExpireDate.AppendChild(doc.CreateTextNode(strExpireDate));
            Card.AppendChild(ExpireDate);

            System.Xml.XmlElement CVV2 = null;
            CVV2 = doc.CreateElement("CVV2");
            CVV2.AppendChild(doc.CreateTextNode(strCVV2));
            Card.AppendChild(CVV2);

            System.Xml.XmlElement Order = null;
            Order = doc.CreateElement("Order");
            GVPSRequest.AppendChild(Order);

            System.Xml.XmlElement OrderID = null;
            OrderID = doc.CreateElement("OrderID");
            OrderID.AppendChild(doc.CreateTextNode(strOrderID));
            Order.AppendChild(OrderID);

            System.Xml.XmlElement GroupID = null;
            GroupID = doc.CreateElement("GroupID");
            GroupID.AppendChild(doc.CreateTextNode(""));
            Order.AppendChild(GroupID);

            System.Xml.XmlElement Description = null;
            Description = doc.CreateElement("Description");
            Description.AppendChild(doc.CreateTextNode(""));
            Order.AppendChild(Description);

            System.Xml.XmlElement Transaction = null;
            Transaction = doc.CreateElement("Transaction");
            GVPSRequest.AppendChild(Transaction);

            System.Xml.XmlElement Type = null;
            Type = doc.CreateElement("Type");
            Type.AppendChild(doc.CreateTextNode(strType));
            Transaction.AppendChild(Type);

            System.Xml.XmlElement InstallmentCnt = null;
            InstallmentCnt = doc.CreateElement("InstallmentCnt");
            InstallmentCnt.AppendChild(doc.CreateTextNode(""));
            Transaction.AppendChild(InstallmentCnt);

            System.Xml.XmlElement Amount = null;
            Amount = doc.CreateElement("Amount");
            Amount.AppendChild(doc.CreateTextNode(strAmount));
            Transaction.AppendChild(Amount);

            System.Xml.XmlElement CurrencyCode = null;
            CurrencyCode = doc.CreateElement("CurrencyCode");
            CurrencyCode.AppendChild(doc.CreateTextNode(strCurrencyCode));
            Transaction.AppendChild(CurrencyCode);

            System.Xml.XmlElement CardholderPresentCode = null;
            CardholderPresentCode = doc.CreateElement("CardholderPresentCode");
            CardholderPresentCode.AppendChild(doc.CreateTextNode(strCardholderPresentCode));
            Transaction.AppendChild(CardholderPresentCode);

            System.Xml.XmlElement MotoInd = null;
            MotoInd = doc.CreateElement("MotoInd");
            MotoInd.AppendChild(doc.CreateTextNode(strMotoInd));
            Transaction.AppendChild(MotoInd);

            System.Xml.XmlElement _Description = null;
            _Description = doc.CreateElement("Description");
            _Description.AppendChild(doc.CreateTextNode(""));
            Transaction.AppendChild(_Description);

            System.Xml.XmlElement OriginalRetrefNum = null;
            OriginalRetrefNum = doc.CreateElement("OriginalRetrefNum");
            OriginalRetrefNum.AppendChild(doc.CreateTextNode(""));
            Transaction.AppendChild(OriginalRetrefNum);
            return doc.OuterXml;
        }

        public bool OdemeyiAl()
        {
            try
            {
                WebRequest _WebRequest = WebRequest.Create(strHostAddress);
                _WebRequest.Method = "POST";
                byte[] byteArray = Encoding.UTF8.GetBytes("data=" + GenerateXmlDocument());
                _WebRequest.ContentType = "application/x-www-form-urlencoded";
                _WebRequest.ContentLength = byteArray.Length;

                Stream dataStream = _WebRequest.GetRequestStream();
                dataStream.Write(byteArray, 0, byteArray.Length);
                dataStream.Close();

                WebResponse _WebResponse = _WebRequest.GetResponse();
               // Response.Write(((HttpWebResponse)_WebResponse).StatusDescription);
                dataStream = _WebResponse.GetResponseStream();


                StreamReader reader = new StreamReader(dataStream);
                string result = reader.ReadToEnd();

                dataStream.Close();
                dataStream.Dispose();
                reader.Close();
                reader.Dispose();
                _WebResponse.Close();

                XmlDocument readeddocument = new XmlDocument();
                readeddocument.LoadXml(result);
                XmlNodeList _statu = readeddocument.GetElementsByTagName("Message");
                XmlNodeList _hata = readeddocument.GetElementsByTagName("ErrorMsg");
                XmlNodeList _RefNo = readeddocument.GetElementsByTagName("RetrefNum");
                
                if (_statu[0].InnerText == "Approved")
                {
                    ConfirmRefNo = _RefNo[0].InnerText;
                    return true;
                }
                else
                {
                    HataIletisi ="Hata Olustu :"+ _hata[0].InnerText;
                    return false;
                }
            }
            catch (Exception ex)
            {
                HataIletisi ="İşleminizi şu an gerçekleştiremiyoruz. Lütfen daha sonra tekrar deneyiniz "+ ex.Message;  
                return false;
            }
        }

Gerekli entegrasyon dokümanlarını buradan edinebilirsiniz. Linkini verdiğim bu dokümandaki kaynak kodlarda birkaç gözden kaçan yer fark ettim. Yanılmıyorsam xml generate ederken olan bölümdeydi. Yukarda benim vermiş olduğum kodlar çalışmaktadır. Onları kullanabilirsiniz. Vermiş olduğum kodları kendi bilgilerinizi girerek çalıştırırsanız muhtemel hata alacaksınızdır. Ben aldım J  Provaut kullanıcısını bu şekilde kullanabilmeniz için size banka tarafından verilen bir panelde provaut kullanıcısına bir şifre belirleyip bu kullanıcıyı aktif hale getirmelisiniz. Ve girmiş olduğunuz bu şifreyi propertydeki sanal pos şifresi alanına set etmelisiniz. Artık çalışmaması için hiçbir neden yok.

Yine de hata alıyorsanız: eticaret@garanti.com.tr mail adresiyle iletişime geçmelisiniz. Çok başarılı teknik destekleri var buradan kendilerini tekrardan tebrik ederim. Harikuladesiniz çocuklar ;)

Kaynak Kodları daha sağlık incelemenizi için garantibank classını buradan indirebilirsiniz.

Umarım yeterince açıklayıcı olmuştur. Yeni bir makalede görüşünceye dek hoşça kalın.

Tags: sanal pos entegrasyonu, garanti sanal pos

Merhaba arkadaşlar, bu makalede json un c# ile nasıl kullanılacağına değineceğim.

Uzun uzun json nedir ne değildir gibi teorik bilgilere girmeyeceğim. ancak wiki den hızlı bir araştırma yapmanızda fayda görüyorum. Json(javascript object notataion)

Kabaca json aslında xmlin tahtına aday yeni bir notasyondur. En büyük farkı tanımlamada xmlden daha az karakter ihtiva etmesidir.Bunlar tabi yazılımcılar arasında geçen yeni platformlara implemente olma için ısınma cümleleri. Benim kullanmamın en büyük nedeni javascript ile olan mükemmel uyumu(xml e göre) DOM yapısına uygun olması tabii ki bir avantaj.

Xml in doğuşunu hatırlayın. Temel amaç farklı platformlar arasındaki veri bütünlüğünü sağlamak için kullanılan bir yapıydı.Bu yapı hala kullanılıyor. Ancak Json xml in tahtını sallamaya başladı. Büyük servisler, büyük programlar artık ortak iletişim dili olarak json u kullanmaya başladı. Bunlara en büyük örnek twitter facebook verilebilir.

Kendinize Json u neden kullanmalıyım, nerede kullanmalıyım diye sorular sorduğunuzu duyar gibiyim. Harika doğru yoldayız. Yazıyı çok fazla uzatmadan hemen pratiğe geçelim

Örnek senaryo: Bir web sitemiz var ve bu web sitesi asenkronla işlem yapmalı.

Jquery AJAX Xml webservis yada pagemethod bu problemi kotarabilmemiz için bu teknolojileri kullanmamız gerekmekte. Peki, bu işin hakkı nedir, nasıl en doğru biçimde bu projeyi tamamlayabiliriz.

Aklıma gelen çözümler hızlı çalışmalı, client ile server arasındaki minimum data aktarımı olmalı. Jquery ile işlerken de çok fazla vaktimizi ve client bilgisayarı yormamalı.

CEVAP: JSON

c# ile List Dictionary Generic gibi keywordlere aşinaysanız aşağıdaki kod sizi zorlamayacaktır.

Çıktısı:

[
{"UrlCategoryName":"Yeme-icme",
"KategoriAdi":"Yeme İçme",
"KategoriId":2
},
{"UrlCategoryName":"Eglence",
"KategoriAdi":"Eglence",
"KategoriId":5
},
{"UrlCategoryName":"Egitim",
"KategoriAdi":"Egitim",
"KategoriId":4
}
]

Şimdi xml ile  json cıktısı arasındaki farka bakalım.

C# tarafında JSON ürettik. Jquery ile nasıl kullanacağımız ise aşağıda. Aynı DataTable gibi :)

$.ajax({
            type: "POST",
            url: Baglanti() + "WebServices/xxx.asmx/Kategori",
            data: '{"id":"'+kategoriid+'"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
             var obj = jQuery.parseJSON(msg.d);
             obj[0]["KategoriAdi"]
}

eger elinizde bir kayıtseti varsa yani 15,20 satırlık bir kayıt seti o zaman jquery each yada herhangi bir döngü kullanmalısınız. Burada temel amaç erişmek istediğiniz satırın index numarasını belirtmektir.

$.each(obj, function(index, data) {
data.KategoriAdi
});

yada

for(i=0; i (kucukisareti) obj.kength; i++){
obj[i]["KategoriAdi"]
}

Kullanım tarzı tamamen size kalmıştır.

Tags: Json

Merhaba arkadaşlar bu yazımızda  image loading işleminin nasıl yapılacağına göz atacağız. Günümüzde web teknolojilerinde artık beklemeye tahammülümüz kalmadı. Halbuki çok geriye gitmeden ADSL'den önce 56K modemlerde internette gezmeye çalıştığımız günleri hatırlıyorum. Bir web sitesinin açılması için mutfağa gidip kendime bir kahve alıp geldiği günleri hatırlıyorum

Bu yazıyı yazdığım günlerde en düşük internet bağlantısı 1MBit ADSL bağlantısı internette gezinmek için yeterli bir bağlantı. Bağlantı hızlarımız yeterli seviyede olduğuna göre artık tek problem sitelerdeki yavaşlık. Sitemizde yaptığımız işlemlerde bazen kullanıcıları bekletmemiz gerekebilmektedir.Bu durumda kullanıcıya yapmak istediği işlemi aldığımızı şu an o işlem üzerinde çalıştığımızı bildirmeliyiz. Bunu da görsellerle desteklersek çok başarılı bir durum yönetimi yapmış oluruz. İşte anlattığım bu olayın tümüne loading işlemi deniyor.

Konuyu fazla uzatmadan dilerseniz hemen örnek senaryomuza geçelim. Bir adet thumbnail resmimiz olduğunu düşünelim. Bu resme tıklandığında orjinal resmi kullanıcıya sunan kadar gecen sürede bir loading işleminin olmasını istiyoruz. Aşağıda örnek kodlarımız bulunuyor.

HTML Kod:

//Picture goes here



Resim 1


Resim 2


Resim 3

Css Kod:

.loading
        {
            border: 1px solid #CCC;
            background: url('images/spinner.gif') no-repeat center center;
        }
        ul
        {
            list-style: none;
        }
        li
        {
            float: left;
            width: 100px;
            height: 100px;
            margin:10px;
        }

Javascript Kod:

$(document).ready(function () {
            $(".loadthispic").click(function () {
                $li = $(this).parent("li");
                $li.addClass("loading");
                var img = new Image();
                $(img).load(function () {
                    $li.removeClass();
                    $('#loader').html(img);
                    $("#loader img").css({width:"200px"});
                }).error(function (err) {
                    alert('Picture not loaded');
                    $li.removeClass();
                }).attr("src", $(this).attr("href"));
                return false;
            });
        });

Kullanıcıya göstermek istediğimiz resmin linkine tıkladığımızda önce li elementine loading classını ekleniyor.(Bu işlemde css de loading classında belirttiğimiz loading işlemi gerçekleşiyor.) Sonra resmi yükleme işleminde javascriptin load eventini kullanıyoruz Detaylı bilgi.

Attr komutuyla resmimizin konumunu belirtiyoruz. Bu konum hatırlayınız tıkladığımız  linkinin normalde gitmesi gereken web adresi. Ancak biz bunu jquery ile return false diyerek engelliyoruz. Loading işlemini daha sağlıklı gerçekleyebilmek için resimlerin boyutlarını büyük seçtim.

Eğer herhangi bir hata almazsak tıkladığımız linkin üst tarafında yeni resmi göreceğiz ve loading işlemi tamamlanmış olacaktır. Olası bir hata durumunda, mesela resmin fiziksel yolu değişmiş olabilir. Bunun içinde bir uyarı verebilirsiniz. Ben örneğimde bir uyarı cıkararak problem olduğunu belirtiyorum. Loading işlemini bitiriyorum. Siz de istediğiniz bir senaryoyu uygulayabilirsiniz. Bu yöntemin dışında resmi yüklemek için AJAX'ı da kullanabilirdik. Detaylı bilgi

Javascript Kod:

$('#loader').load('sample.jpg', function() {
  alert('Load was performed.');
});

Örneğin kaynak kodlarını buradan indirebilirsiniz.Çalışan halini de buradan görebilirsiniz.

Tags: jquery, image loading, image preloading, image, loading, ajax, ajax loading