Change image of a button whithout going into the server with Jquery

Question

Hello, I have a button that has a image and uses a MVC Ajax Form(Not Jquery) but I want change the button image to a loading element via Jquery, how can I do this using a element img that is already loaded in the page (if load from server it lost the purpose of immediatly show a loading element).

Answer 1

Try jQuery:

<img id="my_image" src="button_image.jpg"></img>

$("#my_image").attr("src","loading.jpg");

.attr() is used to set attribute of html element. In this case we change src property.

Answer 2

If you use a tiled button image and careful position, then changing the class will change the apparent image without loading anything new.

e.g. say your button image is 2*50px wide (ie 100px wide)

CSS

button {
  background: url('path/button.png') 0px 0px no-repeat;
  width: 50px;
}

button.pic{
  background: url('path/button.png') 50px 0 no-repeat;//offset the image to show 2nd half
}

There'a good article on the technique here: http://www.alistapart.com/articles/sprites2/