Can KAYA

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