JQUERY

JQuery ERROR Eventı

JQuery ERROR Eventı

JQuery ERROR Eventı

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

<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>

 

Burada $(this).hide() ile resim nesnesini saklıyoruz.

 

  1. 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.

  <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>

 

HENÜZ YORUM YAPILMAMIŞ

YORUM GÖNDER