overlay image with a spinner

I need to overlay a spinner image over an existing image till the new image is generated & replaces the old one.

$(document).ready(function()
{
    $(".deleteWord").live("click", function(event)
    {
        $("#Image").attr("src","").
        $("#Image").attr("src","images/spinner.gif");
        $("#Image").attr("src","RegenerateImage?para="+param);


    });
});

This is what I am currently doing. But this just removes the existing image, places the spinner, regenerates the image & replaces the s开发者_JAVA百科pinner.

---

That is happening because that is what you are telling it to do :) What you need to do is hook up an onload even on the image.

There are many options to achieve this. One of them is to have an image with style="display:none;" on the page and to change that images' "src". When that image loads change your target images "src". Because the browser has already loaded the image it will just appear.

<img id="HiddenImage" src="" style="display:none;" />

$(".deleteWord").live("click", function(event)
    {
        $("#Image").attr("src","images/spinner.gif");
        $("#HiddenImage").attr("src","RegenerateImage?para="+param");
        $("#HiddenImage").load(function(){
             $("#Image").attr("src","RegenerateImage?para="+param");
        });        
    });