kodaman.org

var foto = new Image();
foto.src= "adres";
foto.onerror = function(){alert("hata mesajı");}

bu daha pratik sanki?

Image nesnesinde zaten error nesnesi bulunmaktadır. Fakta jquery'le de bu şekilde yapılabilmektedir. Burda bir eksik var yanlız, resim yüklenmiyor. Classları .noimage olanlarda hata varsa o resmi ekliyor. Bunun yerine sayfadaki tüm hatalı resimleri bulmak için :

1

$('img').each( function(i, val) { $(val).error(function(){$(this).attr("src", "noimage.png");});  });

Üstteki kod ile sayfada bulunan tüm hatalı resimleri hatalı olarak işaretliyorsunuz. Aynı zamanda preload olayında bunu ölçmek için :

1
2
3
4
5
6
7
8
9
10

function preload( div_name, src, callback ) {
     if( div_name != '' && div_name != undefined  ) {
         var img = new Image(); // Yeni resim oluÅŸtur.
         var sonuc = "";
         $(img).load( function(){$(div_name).html("<img src='"+img.src+"' />"); sonuc = "ok";} ).error( function(){$(div_name).html("<img src='noimage.png' />");sonuc = "error";} ).attr("src", src ); // load yüklendiğinde, error hata durumunda ve attr resmin src özelliğini src parametresine eşitliyor. Yükleme işlemi o anda başlıyor.
         if( typeof(callback) == "function" ) // eÄŸer callback fonksiyonsa
         callback(div_name, img, sonuc); // Kişi sonucu görmek isterse.
     }
}

Yukarıdaki kodda ise bir div adı veriyorsunuz( class ya da id adı olarak. örn:"#idname, .classname" ), daha sonra resmin yükleneceği adresi veriyorsunuz. Resmi yüklemeye çalışıyor. İşlem sonlandığında callback parametresine verdiğiniz fonksiyon adına dönüş yapıyor ve bu sayede sonucu görebiliyorsunuz.

Örnek kod :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">
function preload( div_name, src, callback ) {
     if( div_name != '' && div_name != undefined  ) {
         var img = new Image(); // Yeni resim oluÅŸtur.
         var sonuc = "";
         $(img).load( function(){$(div_name).html("<img src='"+img.src+"' />"); sonuc = "ok";} ).error( function(){$(div_name).html("<img src='noimage.png' />");sonuc = "error";} ).attr("src", src ); // load yüklendiğinde, error hata durumunda ve attr resmin src özelliğini src parametresine eşitliyor. Yükleme işlemi o anda başlıyor.
         if( typeof(callback) == "function" ) // eÄŸer callback fonksiyonsa
         callback(div_name, img, sonuc); // Kişi sonucu görmek isterse.
     }
}
</script>
<div id="resmin_eklenecegi_div">
</div>
<script type="text/javascript">
preload("#resmin_eklenecegi_div", "http://www.kodaman.org/generic/images/network.gif", function( div_adi, resim, sonuc ) { if( sonuc=="ok" ) alert("Resim Yüklendi."); else if( sonuc=="error" ) alert("Resim Yüklenemedi.");  });
</script>

Herkese kolay gelsin.

Yazımı okuduğunuz ve önerdiğiniz yöntemler için teşekkür ederim. 2. yöntem kendine göre biraz fazla kod içeriyor. Fakat jQuery biraz daha basit geliyor :)

jQuery basit ama, arkada bir kütüphane barındırıyor, bu da sende performans düşüşüne yol açar. 2 kelime az kod yazmak için arkada koca kütüphaneyi ayaklandırıp performansı düşürmenin anlamı yok diye düşünüyorum. Zaten javascript'in Image nesnesi var, bunu çağırıp size kontrolü yapmak daha mantıklı gibi geliyor.

Evet performans konusunda haklısınız aslında köklü java script uygulamaları haricinde jquery kullanmak pekde mantıklı değil sanırım. Üstelik ne kadar fazla JS kodu o kadar performans düşüşü.

Projenizin içeriğinde dinamiklik varsa jquery :
1. süreden kazanç sağlar
2. basitliğinden kazanç sağlar
3. Boyutları bir hostu yoracak kadar büyük değildir.
4. cache edildiğinden 1 kullanıcı 2 kere aynı dosyayı indirmez.
5. native javascriptte yapacağınız hataları engeller ve performans olarak hardcoder'lara oranla çok daha hızlı çalışır.

Örnek : Kendi elinizde fadeOut efekti yapın, deneyin. Bir de jqueryden şu kodu deneyin :
$("#nesne").fadeOut("slow");

aradaki hız farkı kodu dolambaçlı yazmışsanız yüksek olacaktır.

buradada deÄŸiÅŸik kaynaklar var
Ajax