"Loading" image is downloaded for each click

JavaScript
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:
validating.gif?id=1
validating.gif?id=2
validating.gif?id=3
etc.

instead of just:
validating.gif

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?

Code here:
http://forceflow.50webs.com/loading_test/loading_test.htm

Thanks :slight_smile:

2

Yep, the images don’t redownload/reload/restart. And yes, they’re synchronized.

Thanks :slight_smile:

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.


<body>
<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>

<script>
	var im = new Image();
	im.src = "testing/validating.gif";
	
	$("#l1").click(function(){
		$("#im1").empty().append($(im).clone());
	});
	
	$("#l2").click(function(){
		$("#im2").empty().append($(im).clone());
	});
</script>
</body>