force — 2010-07-03T16:42:33-04:00 — #1
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?
force — 2010-07-03T19:19:56-04:00 — #2
Yep, the images don't redownload/reload/restart. And yes, they're synchronized.
r51 — 2010-07-03T17:44:25-04:00 — #3
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";