Jqzoom: How to hide the loading image animation

Jqzoom: How to hide the loading image animation

Hi,

I have a problem with jqzoom. On my website, there are a lot of pictures.
I have a javascript function implemented, which checks if the big image (used for the zooming) does exist or not.
The problem is... then the page loads, it automatically binds the jqzoom, like so

<a href="image_does_not_exist.jpg" class="MYCLASS" title="kawasaki">   
    <img id="photo_large" src="kawasakigreen_small.jpg" />
</a>


What if the big image (in this case "image_does_not_exist.jpg") does not exist? Ok the big image is not shown, because there is no big image, but the "Loading image animation" appears anyway.
How can I hide this message?

Here is my complete html code. Here I have tried to show the situation, so one big image(the zoom image)for the first image does not exsist. And one big picture for the second image does exist.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">
<style type="text/css">

img{border: 0px;}

.makeDefaultCursor
{
   cursor:default;
}

</style>

<script type="text/javascript">


$(document).ready(function(evt){
               
      $("#bikeGreen").click(function (event)
      {   
            var largePath = $("#kawasakigreen").attr("href"); 
            var id = $("#kawasakigreen").attr("linkToImage");   
            
            $("#photo_large").attr({ src: largePath });            
            
            if(zoomPic_exists_A)         
            {
               $(".MYCLASS").attr({ href: id + ".jpg"});
            }
            
            else
            {
               $(".MYCLASS").attr({ href: ""});                        $('#photo_large').addClass("makeDefaultCursor");
            }
            return false;
               
      });
         
      $("#bikeBlue").click(function ()
      {   
         
            var largePath = $("#kawasakiblue").attr("href"); 
            var id = $("#kawasakiblue").attr("linkToImage");   
            
            $("#photo_large").attr({ src: largePath });
            
            if(zoomPic_exists_B)   
            {
               $(".MYCLASS").attr({ href: id + ".jpg"});
            }
            
            else
            {
               $(".MYCLASS").attr({ href: ""});                        $('#photo_large').addClass("makeDefaultCursor");
            }
         
         return false;      
      });


   var options = {
       zoomWidth: 300,      
       zoomHeight: 300,
        xOffset: 20,
        yOffset: 0,
      title: false,
      zoomType:'reverse',
      showEffect:'fadein',
        hideEffect:'fadeout',
        fadeoutSpeed: 'slow',
      fadeinSpeed: 'slow',
        position: "right" //and MORE OPTIONS
   };
         
   $('.MYCLASS').jqzoom(options);
      
}); // end of jquery


// a boolean variable holding the information, if the big image exists or not. (false: image does not exist | true: image does exist )
var zoomPic_exists_A;
var zoomPic_exists_B;

// This will check if the big image does exist or not.
// In this case the image does NOT exist
var imgsrc_a = 'image_does_not_exist.jpg';
var img = new Image();
var txt;

img.onerror = function (evt){
   txt = this.src;
   zoomPic_exists_A = false;
}
img.onload = function (evt){
   zoomPic_exists_A = true;
}

img.src = imgsrc_a;


// This will check if the other big image does exist or not.
// In this case the image does exist.
var imgsrc_b = 'kawasakiblue.jpg';
var img = new Image();
var txt;

img.onerror = function (evt){
   txt = this.src;
   zoomPic_exists_B = false;

}
img.onload = function (evt){
   zoomPic_exists_B = true;
}

img.src = imgsrc_b;


</script>
</head>

<body>
<div id="pic">

<!-- then the document (HTML page) starts it tries to load the big Image ("image_does_not_exist.jpg"), that does not exist.
Therefore the "Loading Image" and the animation should not be displayed. But I don't know how to achieve this ? -->
<a href="image_does_not_exist.jpg" class="MYCLASS" title="kawasaki">   
    <img id="photo_large" src="kawasakigreen_small.jpg" />
</a>

</div>

<br />
<br />
<br />

<div id="buttons">
   <a id="kawasakigreen" linkToImage="kawasakigreen" href="kawasakigreen_small.jpg"> <img id="bikeGreen" class="gallery" src="btn.jpg"/>  </a>
    <a id="kawasakiblue" linkToImage="kawasakiblue" href="kawasakiblue_small.jpg">   <img id="bikeBlue" class="gallery"src="btn.jpg"/> </a>
</div>

</body>
</html>