"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

jQuery Browser Events - Error

Bu makalemizde jQuery ile Browser Eventlarından error() eventını inceleyeceğiz.

 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
 

 

Yorumlar (0)

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.