Bu makalemizde jQuery ile Browser Eventlarından error() eventını inceleyeceğiz.
Konuyu bir örnekleme ile anlatmak istersek, sayfamıza bir adet resim yerleştirelim. Bu resmin belirtilen adresinde (src=”…”) bulunması durumunda herhangi bir sıkıntımız yok, resmimiz görünecektir. Fakat resmin belirtilen adreste bulunmaması durumunda aşağıdaki örnekteki gibi, resmin yerinde resmin yüklenemediğine dair bir uyarı şekli görünecektir.
Peki resim bulunamadığında yani Browser tarafında bir hata ile karşılaşıldığında resmin yerine başka bir resim gösterme veya resmi göstermeme işleminin gerçekleşmesini istiyorum.
Bu durumda jQuery’nin error eventı devreye girecektir. Yukarıda anlatılan örnek ile ilgili uygulama kodlarını inceleyelim.
1. İlk örneğimiz, resmin bulunamaması durumunda resmin saklanması işlemidir
<html>
<head>
<title></title>
<script src="jquery-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").error(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<img id="resim" src="resim2.jpg"/>
<button id="btn">Tikla</button>
</body>
</html>
Burada $(this).hide() ile resim nesnesini saklıyoruz.
2. Bu örneğimizde ise resmin bulunamaması durumunda resmin yerine başka bir resim (Varsayılan olarak sisteme kaydettiğimiz bir resim olabilir) yerleştirilmesi işlemidir.
<html>
<head>
<title></title>
<script src="jquery-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").error(function(){
$(this).attr({
src: "resim.jpg"
});
});
});
</script>
</head>
<body>
<img id="resim" src="resim2.jpg"/>
<button id="btn">Tikla</button>
</body>
</html>
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi