I was trying to create an enable/disable button that works with AJAX.
So, when a user clicks the image link, it is automatically replaced with a validating.gif image. That image is shown until the $.post() request is completed.
But...the image isn't cached...it's re-downloaded every time for each link.
The image src is loaded as:
instead of just:
I did this is because whenever a new img src was changed to "validating.gif", any existing img src's that were set to "validating.gif" would reload/restart the animation when the change occurred.
Is there a way to fix this so that the animation remains uninterrupted and that the validating.gif image isn't re-downloaded for each link?
Yep, the images don't redownload/reload/restart. And yes, they're synchronized.
You could try loading the image into an image object and then replacing your images with clones of that image. They'll probably all be synchronized, but shouldn't reload/restart.
<p id="im1"><img src="testing/chip1.jpg" /></p>
<p id="im2"><img src="testing/chip2.jpg" /></p>
<a href="#" id="l1">One</a> | <a href="#" id="l2">Two</a>
var im = new Image();
im.src = "testing/validating.gif";